Javascript window.onload（）的JS问题

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

你试过吗

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

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

您尝试过这个吗

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

---

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

您似乎正在调用该函数并将返回/结果分配给onload。相反，请尝试将函数指定为onload

正确：

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

您当前正在做的事情：

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

---

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

您似乎正在调用函数并将返回/结果分配给onload。相反，请尝试将函数指定为onload

正确：

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

您当前正在做的事情：

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

---

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

我找到了答案。这是在Stackoverflow发布的：

我需要这样做很可笑，但它确实有效：

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

---

我找到了答案。这是在Stackoverflow发布的：

我需要这样做很可笑，但它确实有效：

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

---

只是好奇为什么不使用JQuery呢？如果客户没有运行Javascript，那么这两种方法都不起作用，但如果它们都运行了，那么它只会下载JQuery。DOMContentLoaded不是属性，而是通过document.addEventListener'DOMContentLoaded'，function{…]或doment.attachEvent'onDOMContentLoaded'，function{…}进行的事件访问可能有另一个侦听器正在停止传播。我尝试在JS中搜索其他侦听器。很好奇，如果JQuery有效，为什么不直接使用它？如果客户没有运行Javascript，那么这两种方法都不起作用，但是如果它们都运行，那么它只会下载JQuery。DOMContentLoaded不是一个属性，而是一个事件ess通过document.addEventListener'DOMContentLoaded'，函数{…]或doment.attachEvent'onDOMContentLoaded'，函数{…}可能有另一个侦听器正在停止传播。我尝试为其他侦听器通过JS进行grepping。@JoelJoelBinks您应该查看您的脚本。可能有另一个window.onload在某些地方编写。修改您的代码可能会有所帮助。我认为这是正确的。我们只提供一个JS文件，Shopif提供了几个是的，所以我很确定这就是发生的事情。我找到了一个解决方案，见下文。@joeljoelbounds你应该看看你的脚本。可能还有另一个window.onload在某个地方编写。修改一下你的代码可能会有所帮助。我认为这是正确的。我们只提供一个js文件，Shopify提供了几个，所以我很确定这就是问题所在发生了什么。我找到了一个解决方案，见下文。