在運行時加載腳本並確保加載腳本

在腳本文件中，我必須動態地導入另一個腳本並使用其中定義的函數和變量。在運行時加載腳本並確保加載腳本

現在，我將它添加到頁面的HEAD部分，但在添加它之後，外部腳本中定義的函數和變量不會被加載並準備好使用。我該怎麼做，並確保腳本完全加載？

我試過使用script.onreadystatechange和script.onload回調，但我遇到了一些瀏覽器兼容性問題。

我該怎麼做，儘可能安全，與純JS和體面的瀏覽器兼容性？

樣品：

uno.js：

var script = document.createElement("script"); 
script.src = "dos.js"; 
script.type = "text/javascript"; 
document.getElementsByTagName("head")[0].appendChild(script); 
alert(outerVariable); // undefined

dos.js：

var outerVariable = 'Done!';

sample.html

<html> 
    <head> 
     <script type="text/javascript" src="uno.js"></script> 
    </head> 
    ... 
</html>

來源

2013-12-13 everton

爲什麼不叫你從加載腳本的功能？通過這種方式，無論狀態更改回調問題如何，我都會知道它會被加載（我也是這樣做的，因爲類似的問題）。 –

我不確定它足夠安全。但是如果我沒有選擇的話，我會去做的。 – everton

你有什麼兼容性問題？ – putvande

如果您關心的是非IE瀏覽器，我會嘗試使用DOMContentLoaded來查看腳本是否已完全加載。

你可以看到更多關於它here

事實上，這是有點JQuery的如何與文檔準備。這是從jQuery源的這段：

if (document.addEventListener) { 
       // Use the handy event callback 
       document.addEventListener("DOMContentLoaded", DOMContentLoaded, false); 

       // A fallback to window.onload, that will always work 
       window.addEventListener("load", jQuery.ready, false); 
// If IE event model is used 
     } else if (document.attachEvent) { 
      // ensure firing before onload, 
      // maybe late but safe also for iframes 
      document.attachEvent("onreadystatechange", DOMContentLoaded); 

      // A fallback to window.onload, that will always work 
      window.attachEvent("onload", jQuery.ready); 

      // If IE and not a frame 
      // continually check to see if the document is ready 
      var toplevel = false; 

      try { 
       toplevel = window.frameElement == null; 
      } catch(e) {} 

      if (document.documentElement.doScroll && toplevel) { 
       doScrollCheck(); 
      } 
     }

如果你看一下jQuery代碼複製他們做什麼，它在完整的源代碼的綁定準備功能。

來源

2013-12-13 13:02:23 Avitus

好的，這看起來很不錯，但它適用於'domReady'情況。它如何適應腳本加載的情況？只需替換'script'元素的'document'？ – everton

是的，我會試試看。 – Avitus

-1

使用onload（IE9-11，Chrome，FF）或onreadystatechange（IE6-9）。

var oScript = document.getElementById("script") 
     oScript.src = "dos.js" 
     if (oScript.onload !== undefined) { 
      oScript.onload = function() { 
       alert('load') 
      } 
     } else if (oScript.onreadystatechange !== undefined) { 
      oScript.onreadystatechange = function() { 
       alert('load2') 
      } 
     }

來源

2013-12-13 13:10:14 uyitalk

給我兼容性問題，如問題所述。 – everton

到目前爲止，這似乎是更好的工作方法。測試IE9，Firefox和Chrome。

有任何顧慮？

uno.js：

function loadScript(url, callback) { 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = url; 

    if (navigator.appName=="Microsoft Internet Explorer") { 
     script.onreadystatechange = function(){ 
      if (script.readyState == 'loaded') { 
       document.getElementsByTagName('head')[0].appendChild(script); 
       callback(); 
      } 
     }; 
    } else { 
     document.getElementsByTagName('head')[0].appendChild(script); 
     script.onload = function(){ 
      callback(); 
     }; 
    } 
} 

loadScript('dos.js', function(){ 
    alert(outerVariable); // "Done!" 
});

來源

2013-12-13 15:22:18 everton

在運行時加載腳本並確保加載腳本

回答

相關問題