延迟回调，直到脚本添加到文档中

Question

我怎样才能得到回调不运行，直到脚本实际追加到文档?

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

Answer 1

理想情况下，您可以使用<script />标签的onload属性;

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

但是，这在IE中不起作用，所以需要mega-h4x;

  function addScript(filepath, callback) {
      if (filepath) {
          var fileref = document.createElement('script');
          var done = false;
          var head = document.getElementsByTagName("head")[0];
          fileref.onload = fileref.onreadystatechange = function () {
              if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
                  done = true;
                  callback();
                  // Handle memory leak in IE
                  fileref.onload = fileref.onreadystatechange = null;
                  if (head && fileref.parentNode) {
                      head.removeChild(fileref);
                  }
              }
          };
          fileref.setAttribute("type", "text/javascript");
          fileref.setAttribute("src", filepath);
          head.appendChild(fileref);
      }
  }

FWIW，你的if (typeof fileref != "undefined")是多余的，因为它总是求值为真，所以你可以直接做head.appendChild(fileref);，就像我的例子一样。

Answer 2

about:

var myParticularCallback = function () {
    // do something neat ...
}
..... your code  
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.onload = myParticularCallback;
if (typeof fileref!="undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref);
 // after all has set, laod the script and wait for onload event:
fileref.setAttribute("src", filepath);

Answer 3

这个小小的脚本/css加载器将完成这项工作https://github.com/rgrove/lazyload/

LazyLoad.js('/foo.js', function () {
  alert('foo.js has been loaded');
});

Answer 4

最简单的方法是定义一些可见的callback()函数，它将在您的动态包含的脚本中运行，在最后