什麼是等待動態加載的Javascript文件完成加載的有效方法？

我正在加載一個包含函數的Javascript文件，我想要調用它。這是不可能的，因爲在「啓動」加載和實際調用函數之間，JS尚未加載。當然，我可以做類似setTimeout('functionCall();',5000);的東西，但我不認爲這是一種非常有效的方法，而且對我來說看起來真的很不穩定。這就是爲什麼我想知道是否有更好的方法來做到這一點。什麼是等待動態加載的Javascript文件完成加載的有效方法？

這是我正在使用的代碼。有問題的函數被稱爲controllerStart。如果我在此註釋掉最後一行，並將其輸入到Javascript終端（例如Chrome開發人員工具），則一切正常。

function loadController(name){ 
     clearAll(); 
     scriptContainer.innerHTML = ''; 
     var scriptElement = document.createElement('script'); 
     scriptElement.setAttribute('src','controllers/' + name + '.js'); 
     scriptElement.setAttribute('type','text/javascript'); 
     scriptContainer.appendChild(scriptElement); 
     controllerStart();// <-- Doesn't work from here, but works on a terminal 
    }

感謝您的關注！

來源

2012-04-24 Hassan

在引用Javascript後調用函數。

JS加載是同步的。

所以.....

---- JS庫調用-----

-----來電來訪-----

利潤的功能！

編輯：具體爲：

function loadController(name){ 
     clearAll(); 
     scriptContainer.innerHTML = ''; 
     var scriptElement = document.createElement('script'); 
     scriptElement.setAttribute('src','controllers/' + name + '.js'); 
     scriptElement.setAttribute('type','text/javascript'); 
     scriptContainer.appendChild(scriptElement); 
     scriptElement.onload = new function(){controllerStart();}; 
     //something like that. 
    }

編輯2：我的壞 - 使用「的onload」而不是「負荷」 - 太多的jQuery對大腦

瞭解更多「的onload」在這裏：http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html

來源

2012-04-24 22:11:35

感謝您的快速響應。我試過這個代碼，它給了我相同的確切的錯誤。 – Hassan 2012-04-24 22:17:31

沒問題 - 我犯了一個錯誤，onload是你想要的，而不是「加載」 – 2012-04-24 22:22:30

你可以編輯它爲'scriptElement.onload = new function（）{controllerStart（）;};'，因爲那是行得通的。 – Hassan 2012-04-24 22:30:06

Nicholas C. Zackas對此有一篇很好的文章，您可以閱讀here，其中只包括您想使用的代碼。

基本上它只是一個包含要加載的JS文件的URL和加載時執行的回調函數的函數。然後，它創建<script>標記，將其附加到回調函數（通過onreadystatechange或onload事件加載）後執行並將其插入到DOM中。

然後，所有你需要做的是這樣調用它：

loadScript('controllers/' + name + '.js', controllerStart);

來源

2012-04-24 22:19:54 Win32

感謝您的答案！一個非常好的，對不起，我不能接受兩個！ – Hassan 2012-04-24 22:26:02

從它你加載你的JavaScript異步的聲音。在最近的瀏覽器中，標籤上有一個onload事件，當它加載完成時觸發。但是，如果您需要跨瀏覽器支持，唯一的方法是：

（a）如果它是從與您的頁面相同的服務器加載的，請使用AJAX加載您的JavaScript，然後使用eval（）當它被加載時（而不是使用<script>標籤），

（b）如果您控制文件，請將事件觸發器添加到它的結尾，然後在主JavaScript文件中偵聽。 JQuery的bind（）和trigger（）函數非常方便。（c）如果它從別的地方加載，但你沒有控制它（但有權重新發布它），請將它重新定位到你的服務器並按照（a）進行操作。

你也可以不用異步加載，只需在標題中添加一串<script>標記，這是老式的方法。這可以保證每個腳本在上一個腳本完成之後纔會運行。

來源

2012-04-24 22:32:59

什麼是等待動態加載的Javascript文件完成加載的有效方法？

回答

相關問題