window.onload() 的 JS 问题答案

【问题标题】：JS issue with window.onload()window.onload() 的 JS 问题
【发布时间】：2014-11-12 09:45:24
【问题描述】：

我正在将一个应用集成到 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（因为有些客户可能没有运行它）？

【问题讨论】：

只是好奇为什么不使用 JQuery 如果它有效？如果客户没有运行 Javascript，那么这两种方法都不起作用，但如果是，那么它只会下载 JQuery。
DOMContentLoaded 不是属性，而是通过document.addEventListener('DOMContentLoaded', function() { ... ]) 或doument.attachEvent('onDOMContentLoaded', function() { ... }) 进行的事件访问
可能有另一个侦听器停止传播。我尝试通过 JS 搜索其他一些侦听器。

标签： javascript jquery onload

【解决方案1】：

你试过了吗？

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

window.onload 可能会被您上次分配的内容覆盖。你不应该使用它。您必须使用addEventListener，它将所有附加的函数放入队列中，然后所有这些函数将被执行。

【讨论】：

@JoelJoelBinks 你应该看看你的脚本。可能还有另一个 window.onload 写在某个地方。修改您的代码可能会有所帮助。
我认为这是正确的。我们只提供一个 js 文件，而 Shopify 提供了几个文件，所以我很确定这就是正在发生的事情。我找到了解决方案（见下文）。

【解决方案2】：

我找到了答案。它发布在 Stackoverflow 中：$(document).ready() source

我需要这样做很荒谬，但它确实有效：

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");
});

【讨论】：

【解决方案3】：

您似乎正在调用该函数并将返回/结果分配给 onload。而是尝试将函数分配给 onload。

正确：

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

你目前在做什么：

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

看看这是否能解决问题。如果没有，您可以发布更多代码。我将尝试使用正确的解决方案编辑此答案。

【讨论】：