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)?

Just curious as to why not just use JQuery if it works? If a customer is not running Javascript, then neither of these methods will work, but if they are then it will just download JQuery. — AndrewTet, Nov 12 '14 at 00:59
`DOMContentLoaded` is not a property but an event access via `document.addEventListener('DOMContentLoaded', function() { ... ])` or `doument.attachEvent('onDOMContentLoaded', function() { ... })` — Sukima, Nov 12 '14 at 01:02
There might be another listener stopping propagation. Id try grepping through the JS for some other listener. — Oakley, Nov 12 '14 at 01:03

ianaya89 · Answer 1 · 2014-11-12T01:09:17.167

6

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.

edited Nov 12 '14 at 01:09

answered Nov 12 '14 at 01:03

ianaya89

4,153
3
26
34

1

@JoelJoelBinks You should look at your scripts. Probably there is another window.onload written in some place. A fiddle with your code could help. – ianaya89 Nov 12 '14 at 01:14
1

I think that is correct. We only provide one js file and there are several provided by Shopify so I am pretty sure that's what's happening. I found a solution (see below). – Joel Joel Binks Nov 12 '14 at 01:16

score 1 · Answer 2 · edited May 23 '17 at 11:50

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

score -1 · Answer 3 · answered Nov 12 '14 at 01:06

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.

JS issue with window.onload()

3 Answers3