var buffer = "";
var temp = document.writeln;
document.writeln = function(str){buffer += str;}$("head").append($(document.createElement("script")).attr({"type":"text/javascript", "src":"extern.js"}));
$('#contentcontainer_div').append(buffer);document.writeln = temp;
> ~~~javascript
var buffer = "";
> var temp = document.writeln;
> document.writeln = function(str){buffer += str;}
>
> $.ajax({
> type: "GET",
> url: "http://www.example.org/extern.js",
> dataType: "script",
> success: function(data){
> $('#contentcontainer_div').append(buffer);
> document.writeln = temp;
> }
> });
>
Diese beiden Lösungen funktionieren ähnlich und jQuery macht intern dasselbe: ein script-Element erzeugen und einhängen. Das funktioniert serverübergreifend. Hier wird nicht XMLHttpRequest verwendet und daher gilt auch nicht die Same-Origin-Policy. Das Laden (und Ausführen) von Scripten von fremden Servern mithilfe eines script-Elements ist möglich.
Bei der zweiten Lösung gibst du jedoch eine Callback-Funktion an, die von jQuery erst ausgeführt wird, wenn das Script geladen wurde. Das ist wichtig, da das Script, wie ChrisB sagte, asychron im Hintergrund geladen wird. Der Zugriff auf die Ergebnisse des Scripts muss warten, bis das Script geladen und ausgeührt wurde – dazu die Callback-Funktion.
Das Event-Handling, das jQuery hinter den Kulissen macht, ist schwierig browserübergreifend umzusetzen. Daher ist es sinnvoll, die Funktionen zu benutzen, die jQuery einem bietet, anstatt händisch script-Elemente zu erzeugen. Eine Kurzschreibweise für die zweite Variante ist übrigens $.getScript()
.
Mathias