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

......仍然没有任何反应。任何想法为什么会这样，有没有办法让我的脚本与等效的（文档）.ready一起运行而不必诉诸jQuery（因为有些客户可能没有运行它）？

Answer 1

你试过这个吗？

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

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

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

Answer 3

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

正确：

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

您目前正在做什么：

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

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

与window.onload（）的JS问题

3 个答案: