Two window.onload on the site

Question

I use window.onload in the my script which contains other call functions

window.onload = function() {
            maxHeight_main_column();
...
}

and added my script in the head tag

In the body I added new script from other site which uses window.onload again, and my window.onload works good but second window.onload doesn't work, how I can resolve this problem?

I can't edit second file with window.onlad

Use `function func(){/*onloadcodehere*/};if (window.addEventListener)window.addEventListener('load',func,true);else window.attachEvent('onload', func);` — Rob W, Feb 17 '12 at 14:38
Use jquery. You can have as many `$(document).ready()` blocks as you want. Directly messing with `window.onload` is painful when multiple code blocks are trying to register their startup functions. — Marc B, Feb 17 '12 at 14:38
possible duplicate of [Best practice for using window.onload](http://stackoverflow.com/questions/559150/best-practice-for-using-window-onload) — Rob W, Feb 17 '12 at 14:41
That is why everybody told you not to use the old event handling model (`.onclick` & co, and their inline HTML friends). — kapa, Feb 18 '12 at 11:13
@bazmegakapa `window.onload` has one big advantage: You can control the order of execution. Besides that, who said it should not be used? — user123444555621, Feb 19 '12 at 11:57
@Pumbaa80 Can't you do the same with the advanced model? In that case why would you stick to the old one (stubbornness is not an answer)? — kapa, Feb 19 '12 at 12:26

jfriend00 · Accepted Answer · 2012-02-17T15:01:06.410

There can only be one function assigned to window.onload. But, you can have multiple event listeners that listen to that same event.

// cross browser way to add an event listener
function addListener(event, obj, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(event, fn, false);   // modern browsers
    } else {
        obj.attachEvent("on"+event, fn);          // older versions of IE
    }
}

addListener('load', window, myFunc1);    // you can have multiple ones of these
addListener('load', window, myFunc2);    // you can have multiple ones of these
window.onload = myFunc3;                 // one and only one of these

See the MDN doc on addEventListener for more details.

In your specific case, you can use this code for your onload handler and let the other one use window.onload:

// cross browser way to add an event listener
function addListener(event, obj, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(event, fn, false);   // modern browsers
    } else {
        obj.attachEvent("on"+event, fn);          // older versions of IE
    }
}
addListener('load', window, function() {
    maxHeight_main_column();
    ...
});

score 1 · Answer 2 · answered Feb 17 '12 at 14:48

You can use the next function to add multiple onLoad listeners (copied from here):

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

x10 · Answer 3 · 2012-02-19T11:50:26.780

-5

Include jQuery and use this:

$(document).ready(function() {
    maxHeight_main_column();
})

edited Feb 19 '12 at 11:50

answered Feb 17 '12 at 14:37

x10

3,820
1
24
32

This is not the same event, the OP didn't suggest jQuery, and your demo contains a syntax error. Three reasons for a downvote. – Rob W Feb 17 '12 at 14:39
Your code still contains a syntax error, is not equivalent to `window.onload`. Reply to comment: jQuery is not necessary for binding `window.onload` events, because it can be easily achieved without. Loading a whole library, just for `onload` is not a good practice. – Rob W Feb 17 '12 at 14:43
@x10 Somebody said he had seen a website that had no jQuery included. I still wonder how it was working? Might that be magic? – kapa Feb 18 '12 at 11:16
A good answer to "how it was working" might be "differently on every browser" – x10 Feb 19 '12 at 11:51
1

@x10 I'm a big fan of jQuery. But if someone asks a question about the DOM event model, the answer is not jQuery. – kapa Feb 19 '12 at 12:24
Right, as we see from the selected answer, the right thing to do is to copy the jQuery functionality. – x10 Feb 19 '12 at 12:53
@x10 That solution is much older than jQuery itself. – kapa Feb 19 '12 at 14:51

Two window.onload on the site

3 Answers3

Linked