What exactly is the difference between the window.onload event and the onload event of the body tag? when do I use which and how should it be done correctly?
This question is related to
javascript
There is no difference ...
So principially you could use both (one at a time !-)
But for the sake of readability and for the cleanliness of the html-code I always prefer the window.onload !o]
Think of onload like any other attribute. On an input box, for example, you could put:
<input id="test1" value="something"/>
Or you could call:
document.getElementById('test1').value = "somethingelse";
The onload attribute works the same way, except that it takes a function as its value instead of a string like the value attribute does. That also explains why you can "only use one of them" - calling window.onload reassigns the value of the onload attribute for the body tag.
Also, like others here are saying, usually it is cleaner to keep style and javascript separated from the content of the page, which is why most people advise to use window.onload or like jQuery's ready function.
<body onload=""> should override window.onload.
With <body onload="">, document.body.onload might be null, undefined or a function depending on the browser (although getAttribute("onload") should be somewhat consistent for getting the body of the anonymous function as a string). With window.onload, when you assign a function to it, window.onload will be a function consistently across browsers. If that matters to you, use window.onload.
window.onload is better for separating the JS from your content anyway. There's not much reason to use <body onload=""> anyway when you can use window.onload.
In Opera, the event target for window.onload and <body onload=""> (and even window.addEventListener("load", func, false)) will be the window instead of the document like in Safari and Firefox. But, 'this' will be the window across browsers.
What this means is that, when it matters, you should wrap the crud and make things consistent or use a library that does it for you.
There is no difference, but you should not use either.
In many browsers, the window.onload event is not triggered until all images have loaded, which is not what you want. Standards based browsers have an event called DOMContentLoaded which fires earlier, but it is not supported by IE (at the time of writing this answer). I'd recommend using a javascript library which supports a cross browser DOMContentLoaded feature, or finding a well written function you can use. jQuery's $(document).ready(), is a good example.
They both work the same. However, note that if both are defined, only one of them will be invoked. I generally avoid using either of them directly. Instead, you can attach an event handler to the load event. This way you can incorporate more easily other JS packages which might also need to attach a callback to the onload event.
Any JS framework will have cross-browser methods for event handlers.
There is no difference ...
So principially you could use both (one at a time !-)
But for the sake of readability and for the cleanliness of the html-code I always prefer the window.onload !o]
If you're trying to write unobtrusive JS code (and you should be), then you shouldn't use <body onload="">.
It is my understanding that different browsers handle these two slightly differently but they operate similarly. In most browsers, if you define both, one will be ignored.
Sorry for reincarnation of this thread again after another 3 years of sleeping, but perhaps I have finally found the indisputable benefit of window.onload=fn1; over <body onload="fn1()">. It concerns the JS modules or ES modules: when your onload handler resides in "classical" JS file (i.e. referred without <script type="module" … >, either way is possible; when your onload handler resides in "module" JS file (i.e. referred with <script type="module" … >, the <body onload="fn1()"> will fail with "fn1() is not defined" error. The reason perhaps is that the ES modules are not loaded before HTML is parsed … but it is just my guess. Anyhow, window.onload=fn1; works perfectly with modules ...
There is no difference ...
So principially you could use both (one at a time !-)
But for the sake of readability and for the cleanliness of the html-code I always prefer the window.onload !o]
If you're trying to write unobtrusive JS code (and you should be), then you shouldn't use <body onload="">.
It is my understanding that different browsers handle these two slightly differently but they operate similarly. In most browsers, if you define both, one will be ignored.
It is a accepted standard to have content, layout and behavior separate. So window.onload() will be more suitable to use than <body onload=""> though both do the same work.
There is no difference, but you should not use either.
In many browsers, the window.onload event is not triggered until all images have loaded, which is not what you want. Standards based browsers have an event called DOMContentLoaded which fires earlier, but it is not supported by IE (at the time of writing this answer). I'd recommend using a javascript library which supports a cross browser DOMContentLoaded feature, or finding a well written function you can use. jQuery's $(document).ready(), is a good example.
It is a accepted standard to have content, layout and behavior separate. So window.onload() will be more suitable to use than <body onload=""> though both do the same work.
I prefer, generally, to not use the <body onload=""> event. I think it's cleaner to keep behavior separated from content as much as possible.
That said, there are occasions (usually pretty rare for me) where using body onload can give a slight speed boost.
I like to use Prototype so I generally put something like this in the <head> of my page:
document.observe("dom:loaded", function(){
alert('The DOM is loaded!');
});
or
Event.observe(window, 'load', function(){
alert('Window onload');
});
The above are tricks I learned here. I'm very fond of the concept of attach event handlers outside of the HTML.
(Edit to correct spelling mistake in code.)
Think of onload like any other attribute. On an input box, for example, you could put:
<input id="test1" value="something"/>
Or you could call:
document.getElementById('test1').value = "somethingelse";
The onload attribute works the same way, except that it takes a function as its value instead of a string like the value attribute does. That also explains why you can "only use one of them" - calling window.onload reassigns the value of the onload attribute for the body tag.
Also, like others here are saying, usually it is cleaner to keep style and javascript separated from the content of the page, which is why most people advise to use window.onload or like jQuery's ready function.
There is no difference, but you should not use either.
In many browsers, the window.onload event is not triggered until all images have loaded, which is not what you want. Standards based browsers have an event called DOMContentLoaded which fires earlier, but it is not supported by IE (at the time of writing this answer). I'd recommend using a javascript library which supports a cross browser DOMContentLoaded feature, or finding a well written function you can use. jQuery's $(document).ready(), is a good example.
I prefer, generally, to not use the <body onload=""> event. I think it's cleaner to keep behavior separated from content as much as possible.
That said, there are occasions (usually pretty rare for me) where using body onload can give a slight speed boost.
I like to use Prototype so I generally put something like this in the <head> of my page:
document.observe("dom:loaded", function(){
alert('The DOM is loaded!');
});
or
Event.observe(window, 'load', function(){
alert('Window onload');
});
The above are tricks I learned here. I'm very fond of the concept of attach event handlers outside of the HTML.
(Edit to correct spelling mistake in code.)
window.onload can work without body. Create page with only the script tags and open it in a browser. The page doesn't contain any body, but it still works..
<script>
function testSp()
{
alert("hit");
}
window.onload=testSp;
</script>
Think of onload like any other attribute. On an input box, for example, you could put:
<input id="test1" value="something"/>
Or you could call:
document.getElementById('test1').value = "somethingelse";
The onload attribute works the same way, except that it takes a function as its value instead of a string like the value attribute does. That also explains why you can "only use one of them" - calling window.onload reassigns the value of the onload attribute for the body tag.
Also, like others here are saying, usually it is cleaner to keep style and javascript separated from the content of the page, which is why most people advise to use window.onload or like jQuery's ready function.
There is no difference ...
So principially you could use both (one at a time !-)
But for the sake of readability and for the cleanliness of the html-code I always prefer the window.onload !o]
I prefer, generally, to not use the <body onload=""> event. I think it's cleaner to keep behavior separated from content as much as possible.
That said, there are occasions (usually pretty rare for me) where using body onload can give a slight speed boost.
I like to use Prototype so I generally put something like this in the <head> of my page:
document.observe("dom:loaded", function(){
alert('The DOM is loaded!');
});
or
Event.observe(window, 'load', function(){
alert('Window onload');
});
The above are tricks I learned here. I'm very fond of the concept of attach event handlers outside of the HTML.
(Edit to correct spelling mistake in code.)
They both work the same. However, note that if both are defined, only one of them will be invoked. I generally avoid using either of them directly. Instead, you can attach an event handler to the load event. This way you can incorporate more easily other JS packages which might also need to attach a callback to the onload event.
Any JS framework will have cross-browser methods for event handlers.
It is a accepted standard to have content, layout and behavior separate. So window.onload() will be more suitable to use than <body onload=""> though both do the same work.
Think of onload like any other attribute. On an input box, for example, you could put:
<input id="test1" value="something"/>
Or you could call:
document.getElementById('test1').value = "somethingelse";
The onload attribute works the same way, except that it takes a function as its value instead of a string like the value attribute does. That also explains why you can "only use one of them" - calling window.onload reassigns the value of the onload attribute for the body tag.
Also, like others here are saying, usually it is cleaner to keep style and javascript separated from the content of the page, which is why most people advise to use window.onload or like jQuery's ready function.
They both work the same. However, note that if both are defined, only one of them will be invoked. I generally avoid using either of them directly. Instead, you can attach an event handler to the load event. This way you can incorporate more easily other JS packages which might also need to attach a callback to the onload event.
Any JS framework will have cross-browser methods for event handlers.
window.onload - Called after all DOM, JS files, Images, Iframes, Extensions and others completely loaded. This is equal to $(window).load(function() {});
body onload="" - Called once DOM loaded. This is equal to $(document).ready(function() {});
window.onload can work without body. Create page with only the script tags and open it in a browser. The page doesn't contain any body, but it still works..
<script>
function testSp()
{
alert("hit");
}
window.onload=testSp;
</script>
<body onload=""> should override window.onload.
With <body onload="">, document.body.onload might be null, undefined or a function depending on the browser (although getAttribute("onload") should be somewhat consistent for getting the body of the anonymous function as a string). With window.onload, when you assign a function to it, window.onload will be a function consistently across browsers. If that matters to you, use window.onload.
window.onload is better for separating the JS from your content anyway. There's not much reason to use <body onload=""> anyway when you can use window.onload.
In Opera, the event target for window.onload and <body onload=""> (and even window.addEventListener("load", func, false)) will be the window instead of the document like in Safari and Firefox. But, 'this' will be the window across browsers.
What this means is that, when it matters, you should wrap the crud and make things consistent or use a library that does it for you.
window.onload - Called after all DOM, JS files, Images, Iframes, Extensions and others completely loaded. This is equal to $(window).load(function() {});
body onload="" - Called once DOM loaded. This is equal to $(document).ready(function() {});
It is a accepted standard to have content, layout and behavior separate. So window.onload() will be more suitable to use than <body onload=""> though both do the same work.
Sorry for reincarnation of this thread again after another 3 years of sleeping, but perhaps I have finally found the indisputable benefit of window.onload=fn1; over <body onload="fn1()">. It concerns the JS modules or ES modules: when your onload handler resides in "classical" JS file (i.e. referred without <script type="module" … >, either way is possible; when your onload handler resides in "module" JS file (i.e. referred with <script type="module" … >, the <body onload="fn1()"> will fail with "fn1() is not defined" error. The reason perhaps is that the ES modules are not loaded before HTML is parsed … but it is just my guess. Anyhow, window.onload=fn1; works perfectly with modules ...
If you're trying to write unobtrusive JS code (and you should be), then you shouldn't use <body onload="">.
It is my understanding that different browsers handle these two slightly differently but they operate similarly. In most browsers, if you define both, one will be ignored.
'so many subjective answers to an objective question. "Unobtrusive" JavaScript is superstition like the old rule to never use gotos. Write code in a way that helps you reliably accomplish your goal, not according to someone's trendy religious beliefs.
Anyone who finds:
<body onload="body_onload();">
to be overly distracting is overly pretentious and doesn't have their priorities straight.
I normally put my JavaScript code in a separate .js file, but I find nothing cumbersome about hooking event handlers in HTML, which is valid HTML by the way.
'so many subjective answers to an objective question. "Unobtrusive" JavaScript is superstition like the old rule to never use gotos. Write code in a way that helps you reliably accomplish your goal, not according to someone's trendy religious beliefs.
Anyone who finds:
<body onload="body_onload();">
to be overly distracting is overly pretentious and doesn't have their priorities straight.
I normally put my JavaScript code in a separate .js file, but I find nothing cumbersome about hooking event handlers in HTML, which is valid HTML by the way.
<body onload=""> should override window.onload.
With <body onload="">, document.body.onload might be null, undefined or a function depending on the browser (although getAttribute("onload") should be somewhat consistent for getting the body of the anonymous function as a string). With window.onload, when you assign a function to it, window.onload will be a function consistently across browsers. If that matters to you, use window.onload.
window.onload is better for separating the JS from your content anyway. There's not much reason to use <body onload=""> anyway when you can use window.onload.
In Opera, the event target for window.onload and <body onload=""> (and even window.addEventListener("load", func, false)) will be the window instead of the document like in Safari and Firefox. But, 'this' will be the window across browsers.
What this means is that, when it matters, you should wrap the crud and make things consistent or use a library that does it for you.
They both work the same. However, note that if both are defined, only one of them will be invoked. I generally avoid using either of them directly. Instead, you can attach an event handler to the load event. This way you can incorporate more easily other JS packages which might also need to attach a callback to the onload event.
Any JS framework will have cross-browser methods for event handlers.
If you're trying to write unobtrusive JS code (and you should be), then you shouldn't use <body onload="">.
It is my understanding that different browsers handle these two slightly differently but they operate similarly. In most browsers, if you define both, one will be ignored.
Source: Stackoverflow.com