Load google jsapi within javascript?

JavaScript
1

Hi, im trying to write some quite concise embed code and, if possible, i would like to load the google jsapi dynamically. I have followed the approach used here:

http://stackoverflow.com/questions/950087/include-javascript-file-inside-javascript-file


function loadScript(url, callback) {
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        script.onreadystatechange = callback;
        script.onload = callback
        head.appendChild(script);
}

loadScript("http://www.google.com/jsapi",fire);



function fire() {
  //do suff
}

The trouble i am having is that my screen seems to go white after loading. I catch a glympse of the page but it goes white after what i assume is the javascript loading…perhaps stuck in a loop but i have no idea why.

Thanks,
Nick

2

I think instead of binding your callback with onreadystatechange and onload you may need to roll them into the one and check the property script.readyState for loaded or complete. There are also some cross browser issues (IE memory leak) with this approach.

Rather than re-inventing the wheel I’d either use jQuery.getScript() (jQuery.getScript() – jQuery API) or have a look at the jQuery source and pinch what you need (line 7718-ish in http://code.jquery.com/jquery-1.6.2.js - that isn’t the complete picture, but should help)

3

I have had to give up and just use embed code that includes the scripts which is a pain. I tried every combination of loading i could think of including the jQuery solution used above.

The problem i seemed to be having was loading the google jsapi with getscript and then using google.load(“swfobject”, “2.2”); within the callback would cause the white screen of death.