簡體   English   中英

注入了innerHTML 的腳本不會觸發onload 和onerror

[英]Script injected with innerHTML doesn't trigger onload and onerror

我正在嘗試綁定script標記的onloadonerror事件。 這在從 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事件僅意味着無法下載腳本,而不是語法錯誤。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM