JS issue with window.onload()

Question

I am integrating an app into Shopify. I am currently testing our external js file. We are seeing some weird results. When I use this code:

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

the "hi!" appears in the console. But when I use:

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

...nothing happens. I am speculating that there is another onload event handler which happens later and overwrites mine, but even if I try to do the jquery equivalent in js:

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

...still nothing happens. Any ideas why this is, and is there a way to get my script to function with an equivalent of (document).ready without having to resort to jQuery (since some customers may not be running it)?

Answer 1

Did you try this?

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

The window.onload could be overwritten by your last allocation. You should not use it. You must use addEventListener which will put all your functions attached into a queue and later all those functions will be executed.

Answer 2

You seem to be calling the function and assigning the return/result to onload. Instead try assigning the function to onload.

Correct:

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

What you are currently doing:

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

See if that fixes the issue. If not, can you post more of you code. I'll try to edit this answer with the correct solution.

Answer 3

I found an answer. It was posted here in Stackoverflow: $(document).ready() source

It's ridiculous that I need to do this, but it does work:

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