Chrome 无法正确观察脚本标签上的 onload 事件？

Question

我正在使用 Javascript 动态加载外部 Javascript 文件，在我的应用程序中，我需要知道这些脚本何时完全加载到内存中，然后才能继续其余的进程。我尝试使用以下代码来监视附加到头部的脚本标签上的 onload 事件：

var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.onload = scriptLoaded;
newScript.src = '/path/to/file.js';
headID.appendChild(newScript);

_{^{来源：http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS}< /sub>}

这在 FireFox（最新版本的 Windows 和 OS X）中效果很好，但是 Chrome（同样在 Windows 和 OS X 版本中）似乎无法正确观察事件，并且过早调用回调函数。

有什么想法吗？

Answer 1

设法通过用 jQuery 重写来解决这个问题：

var script_tag = $('<script><\/script>');
script_tag.attr('type', 'text/javascript');
script_tag.bind('load', function(e)
{
    console.log('script loaded');
});
script_tag.attr('src', '/path/to/file.js');
$('head')[0].appendChild(script_tag[0]);

不知道为什么会解决这个问题，也许 chrome 只是不喜欢在第一个实现中使用纯 javascript 创建脚本标签的方式。 耸耸肩

Answer 2

您可以尝试将函数调用包装在另一个函数中。我遇到了一些像您所描述的错误，并且执行以下操作有时会有所帮助：

newScript.onload = function(){ scriptLoaded; };

Chrome 似乎正在尝试评估 scriptLoaded 以便将返回值分配给 newScript.onload< /代码>。