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

这在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。

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

2 个答案: