By "remote", I meant different domain, so XHR doesn't work. I'm working in a
very controlled environment, and don't need the callback (actually, the
remote script calls the callback). I'm currently using something like this:
if($.browser.msie) {
script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName("body")[0].appendChild(script);
} else {
$('body').append('<script type="text/javascript" src="' + url +
'"></script>');
}
I just assumed $.getScript() would deal with it. Functionally, is there a
difference between adding the script to body vs head? Thanks for all the
info.
--Erik
On 1/18/07, Christof Donat <[EMAIL PROTECTED]> wrote:
Hi,
> Am I missing something or is there no "jQuery way" to load remote
> javascript? Looks like $.getScript() uses XHR, so it doesn't work.
Why does that not work? Do you have Problems with XMLHttpRequests?
You can create a script tag using DOM, set its src attribute and insert it
into the DOM Tree. In order to know when the script has been loaded create
another script tag right after the forst one without a src attribute and
insert a Text Element. We had that solution a fiew weeks ago (slightly
improved):
(function() {
var addScriptCounter = 0;
var createScript = function(src) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.charset = 'utf-8';
if(src) script.src = src;
}
function addScript( url, callback ) {
var script = createScript(url);
script.myLoadHandler = callback;
script.id = 'dynamicallyLoadedScript_'+addScriptCounter;
var script2 = createScript();
script2.appendChild(
document.createTextNode(
'(function(){'+
'document.getElementById(\'dynamicallyLoadedScript_'+
addScriptCounter+'\').myLoadHandler();})()';
));
var head = document.getElementsByTagName('head')[0];
head.appendChild( script );
head.appendChild( script2 );
addScriptCounter++;
}
})()
Usage:
addScript('jquery.js', function() {
alert('horay, jQuery is available');
});
alert('jQuery is not necessarily available here');
There are Safari versions that don't eval scripts that way. You need to
use a
XMLHttpRequest instead if you whant your script to work with them as well.
For a more general solution see www.jsPax.org. It uses a XMLHttpRequest if
possible (to catch that Safari problem), adds script tags via DOM if
XMLHttpRequest is not available and falls back to a solution I am not
really
shure it works if there is not even a usable DOM implementation - I don't
have any Browsers available that don't even have a usable DOM
implementation.
JsPax also solves the problem, that your script might need to load more
scripts:
a.js:
addScript('b.js',function() { window.alert('A'); });
b.js:
addScript('c.js',function() { window.alert('B'); });
c.js:
window.alert('C');
Will alert A, C and then B. Why?
a.js is executed
b.js starts loading
a.js has finished
b.js is executed
c.js starts loading
b.js is finished
-> alert('A')
c.js is executed
-> alert('C')
c.js is finished
-> alert('B')
With jsPax you write:
a.js:
$using('b',function() { window.alert('A'); $package('a',{}); });
b.js:
$using('c',function() { window.alert('B'); $package('b',{}); });
c.js:
window.alert('C'); $package('c',{});
Result:
C, B, A are alerted in that order as you might expect.
Christof
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
