注入了innerHTML的脚本不会触发onload和onerror
Script injected with innerHTML doesn't trigger onload and onerror
我正在尝试绑定script
标签的onload
和onerror
事件。当从src加载时,这工作得很好。给定以下函数:
function injectJS(src, inline) {
var script = document.createElement("script");
if (inline) {
script.innerHTML = src;
} else {
script.src = src;
}
script.onload = function() {console.log("Success!");};
script.onerror = function() {console.log("Error!");};
document.body.appendChild(script);
}
我可以很容易地知道脚本是否已加载:
> injectJS("https://code.jquery.com/jquery-3.1.1.min.js");
Success!
> injectJS("https://raw.githubusercontent.com/eligrey/FileSaver.js/master/FileSaver.js");
Error!
但是当使用innerHTML注入内联JS时,脚本不会触发事件:
> injectJS("console.log('"Yes!'");", true);
Yes!
> injectJS("console.log('"Loaded but error...'"); error;", true);
Loaded but error...
Success!
在这些情况下没有被记录。但是,我可以在前面加上一些可以调用函数的代码,例如,一旦脚本加载。
当出现错误导致脚本无法加载时,问题就出现了,例如语法错误:
> injectJS("console.log('"Success! Or not..'"); syntax error;", true);
不记录任何内容(当然,错误除外)。如何在加载之前检测注入脚本是否已加载或错误?
编辑:
Oriol的回答为我指明了正确的方向。作为参考,下面是最终的函数,它完全按照我想要的方式工作,并且通过了5个测试用例:function injectJS(src, inline, on_success, on_error) {
var script = document.createElement("script");
script.onload = on_success;
script.onerror = on_error;
if (inline) {
script.innerHTML = "window.script_loaded = true; " + src;
} else {
script.src = src;
}
document.body.appendChild(script);
if (inline) {
var loaded = window["script_loaded"];
window.script_loaded = false;
if (loaded) {
on_success();
} else {
on_error();
}
}
}
内联脚本同步加载。所以你根本不需要事件。
只使用
function injectJS(src, inline) {
var script = document.createElement("script");
script.onload = function() {console.log("Success!");};
script.onerror = function() {console.log("Error!");};
if (inline) {
script.innerHTML = src;
script.onload();
} else {
script.src = src;
}
document.body.appendChild(script);
}
injectJS("console.log('"Yes!'");", true);
您将无法检测语法错误,但就像使用外部脚本一样。error
事件仅表示脚本无法下载,而不是语法错误。
相关文章:
- window.onload没有'无法在Android WebView中工作
- JavaScript-动态SVG-onload属性-未触发事件
- 在phonegap中为android调用onload函数的最佳方式
- image.onload事件和浏览器缓存
- 将函数从onclick修改为onload
- Combine onload, onresize and onclick
- onLoad function phonegap android
- 任何一种简单的方法都可以将带有onload的元素作为目标
- 如何调用表td标记内的Onload函数
- IE中的Onload()处理程序没有响应
- 动态创建的iframe中的window.onerror在lne 0处给出脚本错误
- 预加载图像image.onload脚本MVC
- 如何处理Ajax.BeginForm()OnError OnFailure回调
- 不执行包含的页面的Javascript onload函数
- 你能停止window.onload函数吗
- 无法将java脚本函数与Panel'绑定;s OnLoad事件
- Jquery change onchange in onload
- onError 在 onLoad 中加载图片失败时不调用
- 注入了innerHTML的脚本不会触发onload和onerror
- 使用JS/jQuery检查onload和onerror