在运行时加载脚本并确保加载脚本

在脚本文件中，我必须动态地导入另一个脚本并使用其中定义的函数和变量。在运行时加载脚本并确保加载脚本

现在，我将它添加到页面的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

在运行时加载脚本并确保加载脚本

回答

相关问题