Jak dynamicznie ładować plik javascript z innej domeny?

Question

znajdę to doskonałe kodu zamieszczonych przez aemkei jako odpowiedzi na to pytanie:

1. How do you dynamically load a javascript file? (Think C’s #include)
2. Use javascript to inject script references as needed?

Możesz napisać tagów dynamicznych skryptów (używając prototyp):

new Element("script", {src: "myBigCodeLibrary.js", type: "text/javascript"}); 

Problem polega na tym, że nie mamy znać, kiedy plik skryptu zewnętrznego jest w pełni załadowany.

często chcemy nasz kod zależny od bardzo następnej linii i lubię pisać coś takiego:

if (iNeedSomeMore){ 
    Script.load("myBigCodeLibrary.js"); // includes code for myFancyMethod(); 
    myFancyMethod();      // cool, no need for callbacks! 
} 

Jest inteligentny sposób wstrzyknąć skrypt zależności bez konieczności wywołań zwrotnych. Wystarczy przeciągnąć skrypt za pomocą synchronicznego żądania AJAX i wykonać eval skryptu na poziomie globalnym.

Jeśli używasz Prototype metoda Script.load wygląda następująco:

var Script = { 
    _loadedScripts: [], 
    include: function(script){ 
    // include script only once 
    if (this._loadedScripts.include(script)){ 
     return false; 
    } 
    // request file synchronous 
    var code = new Ajax.Request(script, { 
     asynchronous: false, method: "GET", 
     evalJS: false, evalJSON: false 
    }).transport.responseText; 
    // eval code on global level 
    if (Prototype.Browser.IE) { 
     window.execScript(code); 
    } else if (Prototype.Browser.WebKit){ 
     $$("head").first().insert(Object.extend(
     new Element("script", {type: "text/javascript"}), {text: code} 
    )); 
    } else { 
     window.eval(code); 
    } 
    // remember included script 
    this._loadedScripts.push(script); 
    } 
}; 

znalazłem, że kod nie działa w IE, jeśli wszystkie z nich wykonywana jest w „file:// 'protokół, jednak nie jest to problem, ponieważ jego przypadek użycia dotyczył rzeczywistej aplikacji internetowej.

Próbowałem go raz dołączyć http://www.google-analytics.com/urchin.js przez google, ale z jednej ze strony internetowej, ale wygląda na to, że nie można zażądać pliku javascript z innej domeny.

W jaki sposób możemy dynamicznie dodawać javascript, tak jak robi to powyższe skrypty, ale z innej domeny?

Answer 1

Model zabezpieczeń w nowoczesnych przeglądarkach zapobiega wysyłaniu żądań między domenami w języku JavaScript. Ma to dziury (zobacz wszystkie exploity witryny od początku Internetu), ale korzystanie z nich jest bardziej niż trochę podejrzane i to tylko kwestia czasu, zanim zostaną załatane.

Answer 2

To, co powiedział Rex, jest poprawne, chociaż w HTML5 dodano komunikaty między domenami i xhr, które wymagają trochę pracy z Twojej strony, ale powinny być użyteczne, aby to osiągnąć. Niestety, nie są one jeszcze obecne we wszystkich wydanych przeglądarkach (myślę, że najnowsze betosy z safari, firefoxa i IE mają wsparcie dla niektórych z tych funkcji, ale nie jestem pewien, które przeglądarki obsługują które apisy)

Answer 3

Możesz użyj zdarzenia onload i onreadystatechange, aby zrozumieć, kiedy załadowany jest znacznik <script>.

var script = new Element("script", {src: "myBigCodeLibrary.js", type: "text/javascript"}); 

script.onload = script.onreadystatechange = function(){ 
    if (!this.readyState || 
     this.readyState == "loaded" || this.readyState == "complete") { 
     //script is loaded 
    } 
};