Add javascript variable to javascript src?

Question

this may sound a bit noobish, but I\'m trying to retrieve the video information for a YouTube video (I saw in some tutorial) basically here\'s the code

Answer 1

Where is the code snippet within the page? If it's inside a <script> tag, the problem is that the script tag is being interpreted as javascript, not html. Instead, from the original script tag you can use document.write to write the script tag to the dom.

The new code would be something like:

function youtubeFeedCallback1(data) {
    var s = '';
    var k = '';
    s += data.entry.title.$t;
    k += data.entry.media$group.media$thumbnail[2].url;
    vidtitle1=s
    vidthumb1=k
  }
document.write("<script type=\"text/javascript\" id=\"javaone\" src=\"http://gdata.youtube.com/feeds/api/videos/\"+vidid[0]+\"?v=2&amp;alt=json-in-script&amp;callback=youtubeFeedCallback1\"></script>");

The script tag needs to be written in javascript to access the vidid variable, but that means you have to manipulate the DOM in order to add the script tag since you're no longer in HTML.

Answer 2

function youtubeFeedCallback1(data) {
  var s = '';
  var k = '';
  s += data.entry.title.$t;
  k += data.entry.media$group.media$thumbnail[2].url;
  vidtitle1 = s
  vidthumb1 = k

}


<script id="javaone"></script>

<script>
  
  var fullSrc = "http://gdata.youtube.com/feeds/api/videos/"+vidid[0]+"?v=2&amp;alt=json-in-script&amp;callback=youtubeFeedCallback1";
  
  $('#javaone').attr("src",fullSrc);

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

I think you get the idea: 1. create empty script container. 2. define the complete link in a variable. 3. set this variable as a src attribute to the empty script.

p.s. don't know if it works in js. This is jquery

Answer 3

What you're trying to do is called called JSONP. Since you can't use a regular Ajax call to fetch JSON from another domain (it would have security implications), you have to add a script that will call the callback function you specify, and pass it the JSON. As other answers say, you have to create the script tag programmatically. I wouldn't use document.write for that, because it won't work after page load (the new script would replace the whole document). But there is a very simple alternative:

function youtubeFeedCallback1(data) {
    var s = '';
    var k = '';
    s += data.entry.title.$t;
    k += data.entry.media$group.media$thumbnail[2].url;
    vidtitle1=s;
    vidthumb1=k;
}

var script = document.createElement('script');
script.src = "http://gdata.youtube.com/feeds/api/videos/" + vidid[0] + "?v=2&alt=json-in-script&callback=youtubeFeedCallback1";
document.body.appendChild(script);

One last recommendation: I see you have global variables on your callback, vidtitle1 and vidthumb1. Whatever you need to do with their values, do it from the callback (and preferably get rid of the global variables), or chances are it won't work. The data will be loaded asynchronously, so the variables are only guaranteed to contain their values after the callback runs.

Answer 4

Either document.write it or createElement()/appendChild()

var id = "asdf";
document.write('\x3Cscript type="text/javascript" src="foo.js?id=' + id + '">\x3C/script>');

Answer 5

Though CDATA works fine, using document.createElement is also a great choice.. Especially if you intend to append some value to a URL, say for cache busting..

<script type="text/javascript"> 
    var versionJSLink = "/Folder/sub_folder/version.js?version=" + Math.random();
    JSElement = document.createElement('script');
    JSElement.src = versionJSLink;
    JSElement.onload = OnceLoaded;
    document.getElementsByTagName('head')[0].appendChild(JSElement);

    function OnceLoaded() {
        // Once loaded.. load other JS or CSS or call objects of version.js
    }
</script>

Have fun.. :)