通过内容单检查网页中变量的存在

Question

我想有条件地在网页的DOM中插入几个javascript文件。我还想添加一个依赖项。

var load = function(filename, callback) {
   fileref  = document.createElement("script")
   fileref.setAttribute "type", "text/javascript"
   fileref.setAttribute "src", filename
   document.getElementsByTagName("head")[0].appendChild fileref
   if (typeof callback !== "undefined" && callback !== null) {
     callback();
   }
}

load("http://www.myserver.com/lib.js",
  function() { load("http://www.myserver.com/core.js") }
)

但是我想检查“lib.js”是否真的被执行了。为此，我希望等到lib.js中的变量可用为止。我该怎么做呢？

Answer 1

不要立即运行您的callback。因为内容脚本与它们的页面共享DOM，所以可以在DOM <script>元素上等待<script>事件：

var load = function(filename, callback) {
   fileref  = document.createElement("script");
   fileref.setAttribute("type", "text/javascript");
   fileref.setAttribute("src", filename);

   // fire callback when script loads
   fileref.addEventListener("load", function() {
       if (typeof callback !== "undefined" && callback !== null) {
         callback();
       }
   });

   document.getElementsByTagName("head")[0].appendChild(fileref);
}

load("http://www.myserver.com/lib.js",
  // this callback will run only after lib.js has fully loaded
  function() { load("http://www.myserver.com/core.js") }
)