执行通过 DOM 插入加载的 javascript

Question

我正在研究将小部件添加到客户站点的东西，并且我想异步加载我的js，以免阻止客户的页面加载。我已经阅读了很多有关此问题的帖子，并且一直在尝试实现此处建议的模式，因为我的项目非常相似：

http://friendbit.com/js/lazy-loading-asyncronous-javascript

我遇到的问题是动态加载的 javascript 文件中的代码没有被执行。抱歉，如果这似乎是一个重复的问题，但我花了几个小时搜索并尝试略有不同的技术，并且我阅读了许多帖子，包括这些 stackoverflow 问题：

• 异步加载 javascript，然后在执行回调之前检查加载的 DOM
• 在js中加载jQuery，然后执行依赖于它的脚本
• 动态加载脚本

但我仍在努力完成这项工作，所以我希望如果我直接问问题这里有人可能可以帮助我！

我目前有以下作为一个非常基本的测试；显然，我的真实脚本中还发生了很多事情，但我只需要了解这里发生了什么（或者实际上没有发生什么）。

因此，在我的代码文件“test.js”中，我只需：

run_test = function () {
    alert('hello from test');
};

然后在页面上：

(function () {
     load_test = function () {
        var t = document.getElementsByTagName('script')[0];
        var s = document.createElement('script');
        s.type = 'text/javscript';
        s.async = true;
        s.src = 'test.js';

        s.onload = s.readystatechange = function () {
            if (run_test) run_test();

            s.onload = null;
            s.onreadystatechange = null;
        };

        t.parentNode.insertBefore(s, t);
    };

    load_test();
})();

我已经尝试了几种变体 - 我尝试删除“s.async = true”只是为了看看它是否会产生有区别，但事实并非如此。我最初有以下内容而不是“load_test();”，正如我提到的第一篇文章中所建议的：

window.attachEvent ? window.attachEvent('onload', load_test) : window.addEventListener('load', load_test, false);

但结果总是相同的，我从未看到消息“hello from test”。事实上，我什至可以在 load_test 函数中放置警报 - 如果我在“s.onload = s.readystatechange ..”行之前放置警报，我会看到该消息，但该 onload 函数中永远不会出现警报。因此，动态添加的脚本的 onload 似乎永远不会触发。

顺便说一句 - 可能相关也可能不相关，但我通常在 Firefox 中测试，如果我在 firebug 中查看 html，我会看到 test.js 脚本已加载，但如果我展开该节点，我只会看到消息“重新加载页面以获取...的源代码”。无论我重新加载页面多少次，我都看不到代码。我尝试在其他浏览器中进行测试，结果相同。

不禁觉得我在这里错过了一些基本的东西；任何帮助将非常感激！

皮特

---

感谢大家的意见。

@zzzzBov，感谢您提供的示例，尽管我不确定我是否完全理解 - 我认为“onload”会在脚本完成加载后触发一次，就像将代码附加到页面的 onload 事件一样。我对“onreadystatechange”的理解是，它只是为了在IE中捕获相同的东西。

为了响应您的评论，新脚本将插入到页面的头部（使用 insertBefore 语句），就在原始脚本块之前（假设原始脚本块位于头部，事实确实如此）。

关于test.js路径，我省略了路径只是为了简化示例。我的脚本路径绝对是正确的；我可以通过 firebug 看到脚本实际上已添加（到头部）。

我的问题是，加载脚本后，它根本无法运行，但我认为我实际上遇到了一些缓存问题，因为我已经使用上面发布的第一个链接中描述的模式（这里又是针对好的措施： http://friendbit.com/js/lazy-loading-asyncronous-javascript/）。

所以我的代码是这样的：

(function () {
    var addscript = function () {
        var h = document.getElementsByTagName('head')[0],
            s = document.createElement('script');
        s.type = "text/javascript";
        s.async = true;
        s.src = "myscript.js";
        h.appendChild(s);
    };
    window.attachEvent ? window.attachEvent('onload', addscript) : 
        window.addEventListener('load', addscript, false);
})();

如果您检查该帖子的评论，我认为它在某处解释了为什么仍然包含“s.async = true”是个好主意，即使在这种情况下脚本附加到窗口加载事件。

我的“真正的”主脚本实际上需要 jQuery，所以我认为我的最终解决方案将是使用类似的东西来加载 jQuery，然后一旦我知道它已加载，就让 jQuery 完成加载我需要的任何其他脚本的工作。

再次感谢您的帮助。

皮特

Answer 1

您的脚本存在一些问题。这是一个应该可行的方法。

function loadScript(src, callback)
{
  var s, r;
  r = false;
  s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = src;
  s.onload = s.onreadystatechange = function() {
    //console.log( this.readyState ); //uncomment this line to see which ready states are called.
    if ( !r && (!this.readyState || this.readyState == 'complete') )
    {
      r = true;
      callback();
    }
  };
  document.body.appendChild(s);
}

load_test 函数的问题在于，它会在新脚本执行之前调用 run_test()。您的脚本将在第一个 onreadystatechange 事件（通常为 loading）处删除 onload 和 onreadystatechange 事件回调。

另外，async 应该是不必要的，因为新添加的脚本将被插入到 document.body 的末尾，无论它在哪里。如果您想在页面其余部分之后加载脚本，请先等待页面其余部分加载（body.onload 或 document.onreadystatechange）调用loadScript。

您的脚本的最大问题听起来像是 test.js 不存在于它被调用的路径中。确保内联添加 确实有效。