window.onload（）的JS問題

Question

我正在將一個應用程序集成到Shopify中。 我目前正在測試我們的外部js文件。 我們看到了一些奇怪的結果。 當我使用此代碼時：

jQuery(document).ready(function(){
    console.log("hi");
});

“嗨！” 出現在控制台中。 但是當我使用時：

window.onload = function() {
    console.log("hi!");
}

...什么都沒發生。 我推測還有另一個onload事件處理程序，稍后會發生並覆蓋我的事件處理程序，但是即使我嘗試在js中執行等效的jquery：

window.DOMContentLoaded = function() {
    console.log("hi!");
}

...仍然沒有任何反應。 有什么想法，為什么？有沒有辦法讓我的腳本在與（document）.ready等效的情況下運行，而不必訴諸jQuery（因為某些客戶可能沒有運行它）？

Answer 1

你有嘗試過嗎？

window.addEventListener("load", function(){
 alert('hi');
});

window.onload可能會被您的最后分配覆蓋。 您不應該使用它。 您必須使用addEventListener ，它將所有附加功能放入隊列中，然后所有這些功能將被執行。

Answer 2

我找到了答案。 它發布在這里Stackoverflow： $（document）.ready（）源

我需要這樣做很荒謬，但是它確實有效：

var ready = (function () {
    var ready_event_fired = false;
    var ready_event_listener = function (fn) {

        // Create an idempotent version of the 'fn' function
        var idempotent_fn = function () {
            if (ready_event_fired) {
                return;
            }
            ready_event_fired = true;
            return fn();
        }

        // The DOM ready check for Internet Explorer
        var do_scroll_check = function () {
            if (ready_event_fired) {
                return;
            }

            // If IE is used, use the trick by Diego Perini
            // http://javascript.nwbox.com/IEContentLoaded/
            try {
                document.documentElement.doScroll('left');
            } catch(e) {
                setTimeout(do_scroll_check, 1);
                return;
            }

            // Execute any waiting functions
            return idempotent_fn();
        }

        // If the browser ready event has already occured
        if (document.readyState === "complete") {
            return idempotent_fn()
        }

        // Mozilla, Opera and webkit nightlies currently support this event
        if (document.addEventListener) {

            // Use the handy event callback
            document.addEventListener("DOMContentLoaded", idempotent_fn, false);

            // A fallback to window.onload, that will always work
            window.addEventListener("load", idempotent_fn, false);

            // If IE event model is used
        } else if (document.attachEvent) {

            // ensure firing before onload; maybe late but safe also for iframes
            document.attachEvent("onreadystatechange", idempotent_fn);

            // A fallback to window.onload, that will always work
            window.attachEvent("onload", idempotent_fn);

            // If IE and not a frame: continually check to see if the document is ready
            var toplevel = false;

            try {
                toplevel = window.frameElement == null;
            } catch (e) {}

            if (document.documentElement.doScroll && toplevel) {
                return do_scroll_check();
            }
        }
    };
    return ready_event_listener;
})();

ready(function(){
console.log("hi");
});

Answer 3

您似乎正在調用該函數並將返回/結果分配給onload。 而是嘗試將功能分配給onload。

正確：

function myFuntion(){
      console.log("hi!");
}
window.onload = myFunction;

您目前正在做什么：

var result =  myFuntion();
window.onload = result;

查看是否可以解決問題。 如果沒有，您是否可以發布更多代碼。 我將嘗試使用正確的解決方案來編輯​​此答案。