遠程JavaScript加載後執行本地Javascript？

Question

我有一個頁面，我正在使用jquery/ajax從另一個組件中拉下一大塊HTML/JS並將它注入到頁面中。該HTML引用額外的JS文件，並且我需要那些被引用的JS文件在我運行我的JavaScript之前加載。

正被注入的HTML/JS看起來是這樣的：

<script type="text/javascript" src="http://myserver/js/ABunchOfStuff.js"></script> 
<div> 
    blah blah blah 
</div> 
<script type="text/javascript"> 
    //"sourceList" is defined in the ABunchOfStuff.js above, but it's not available by the time this executes. 
    $("input#autocomplete").autocomplete({ 
     source: sourceList, 
     minLength: 2 
    }); 
</script> 

通常我會只是掛鉤到一個窗口加載事件或$（文件）。就緒（）或什麼，但在這如果窗口和文檔已經完全加載，現在我們會在事實之後添加更多內容。

有一種可能性是將一個遞歸setTimeout調用放到引用的javascript可用，但這很醜陋。

那麼是否有任何干淨的方式來捕獲引用的JavaScript事件已被加載，並在當時執行代碼？

感謝

Answer 1

您還可以使用getScript，並在成功回調做你autoComplete：

jQuery.getScript('http://myserver/js/ABunchOfStuff.js', function(data, textStatus) { 
     $("input#autocomplete").autocomplete({ 
      source: sourceList, 
      minLength: 2 
     }); 
}); 

Answer 2

最大的問題是，如何你注入這個腳本？

如果使用「標準」腳本標記插入，則可以去看看onload事件（IE中的onreadystatechange）。

var scr = document.createElement('script'); 
    scr.type = 'text/javascript'; 
    scr.src = 'somewhere/somename.js'; 
    scr.onload = scr.onreadystatechange = function() { 
     if(/complete|loaded/.test(scr.readyState)) { 
      // do something 
     } 
     else { 
      // do something 
     } 
    }; 

Answer 3

你在做什麼錯在這裏沒有等待DOM加載。

如果您改變.autocomplete只執行一次的DOM加載通過$(document).ready將已經執行了ABunchOfStuff.js

像這樣：如果你控制http://myserver/js/ABunchOfStuff.js文件

(function($) { 
    $(document).ready(function() { 
    $("input#autocomplete").autocomplete({ 
     source: sourceList, 
     minLength: 2 
    }); 
    } 
}(jQuery)); 

Answer 4

然後，你可以在第一次執行時調用你的其他JS。由於它在首次加載時以及可用時執行，因此您擁有完美的時間。

如果這個JS文件用於其他地方也一樣，當它執行加入這樣的事情吧，你可以添加一些通用的功能，它調用回調：

try { 
    if (aBunchOfStuffCallbacks) { 
     for (var i = 0; i < aBunchOfStuffCallbacks.length; i++) { 
      aBunchOfStuffCallbacks[i].call(this); // call callback to announce we're loaded 
     } 
    } catch(e) {} 

而且，當時在任何網絡您想aBunchOfStuffCallbacks加載時調用頁面，你只需做到這一點：

var aBunchOfStuffCallbacks = []; 
aBunchOfStuffCallbacks.push(myFunc); 
function myFunc() { 
    // put my code here for when aBunchOfStuffCallbacks is loaded 
} 

這將允許多個回調。只是一個回調的簡單的版本是這樣的：

try { 
    if (aBunchOfStuffCallback) { 
      aBunchOfStuffCallback.call(this); // call callback to announce we're loaded 
     } 
    } catch(e) {} 

而且，它是這樣設置的：

var aBunchOfStuffCallbacks = function() { 
    // put my code here for when aBunchOfStuffCallbacks is loaded 
}