CODEWITHSUNDEEP
javascriptonload
M4nch4k
M4nch4k

Reputation: 465

Javascript - Use onload event , or not

I'm coding a script that will be used on several websites as a plugin. I have to use only Javascript, no framework. I'm asking myself, what is the best way to load my script without causing any trouble with other scripts or frameworks that can be loaded on these websites. I thought to do a global function where i call the functions I want to use, and I put this function on the window.load event, like this :

<script>
    var global = function(){
    object.domain.function1();
    object.domain.function2(param1, param2);
    object.domain.function3(1);
}
(function(){
    if(document.addEventListener){
        document.addEventListener('load',global, false);
    }
    if(document.attachEvent){
        document.attachEvent('onload',global);
    }
})();
</script>

Or simply :

<script>
    object.domain.function1();
    object.domain.function2(param1, param2);
    object.domain.function3(1);
</script>

Of course, I need some elements are loaded on my page. Thanks in advance.

Upvotes: 3

Views: 1816

Answers (2)

Paul S.
Paul S.

Reputation: 66334

what is the best way to load my script without causing any trouble with other scripts or frameworks

The things you need to consider are, are you..

  • polluting the namespace
  • obstructing another script

The second point is easy to work around, .addEventListener supports adding many listeners for the same event which won't overwrite each other. There are two different events you might be interested in, 'load' on window and 'DOMContentLoaded' on document. You can always put a <script> at the very end of <body> but I personally don't like doing this because you're mixing HTML with JavaScript or changing the DOM tree.

For the first point, this can be done via the use of anonymous functions and, should you need to occupy the namespace, keeping all of your variables and methods inside one object to minimise your impact.

Putting all this together you may end up with something like this

var myObjectName = { // everything in one object in global namespace
    domain: {
        function1: function () { /*...*/ },
        function2: function () { /*...*/ },
        function3: function () { /*...*/ }
    }
};

(function (fn) {
    if (window.addEventListener) {
        window.addEventListener('load', fn, false);
    }
    else if (window.attachEvent) { // Consider if support for `.attachEvent` is really necessary, people need to move on.
        window.attachEvent('onload', fn);
    }
})(function () { // pass your function anonymously
    myObjectName.domain.function1();
    myObjectName.domain.function2(param1, param2);
    myObjectName.domain.function3(1);
});

Upvotes: 1

nemesisx00
nemesisx00

Reputation: 2066

If you're ok with putting javascript inside the <body> tag then a fairly reliable way of running javascript after the entire page has loaded is placing your javascript in <script> tags at the very bottom of the page.

It's not my preferred way of handling this issue, but if using the onload event is not working quite right for you this would be a good next step.

Upvotes: 2

Related Questions