我正在尝试绑定onload和标记onerror事件script。这在从 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);
}
Run Code Online (Sandbox Code Playgroud)
我可以轻松知道脚本是否已加载:
> injectJS("https://code.jquery.com/jquery-3.1.1.min.js");
Success!
> injectJS("https://raw.githubusercontent.com/eligrey/FileSaver.js/master/FileSaver.js");
Error!
Run Code Online (Sandbox Code Playgroud)
但是当使用innerHTML注入内联JS时,脚本不会触发事件:
> injectJS("console.log(\"Yes!\");", true);
Yes!
> injectJS("console.log(\"Loaded but error...\"); error;", true);
Loaded but error...
Run Code Online (Sandbox Code Playgroud)
Success!在这些情况下没有被记录。但是,我可以预先添加一些可以调用函数的代码,例如,一旦加载了脚本。
当出现阻止脚本加载的错误时,问题就出现了,例如语法错误:
> injectJS("console.log(\"Success! Or not..\"); syntax error;", true);
Run Code Online (Sandbox Code Playgroud)
没有记录任何内容(当然,错误除外)。如何在加载之前检测注入的脚本是否已加载或出错?
编辑:
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();
}
}
}
Run Code Online (Sandbox Code Playgroud)
内联脚本是同步加载的。所以你根本不需要这些事件。
只需使用
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);Run Code Online (Sandbox Code Playgroud)
您将无法检测语法错误,但这就像使用外部脚本一样。该error事件仅意味着无法下载脚本,而不是语法错误。
| 归档时间: |
|
| 查看次数: |
1672 次 |
| 最近记录: |