How to fire "onload" event on document in IE
Solution 1
According to this page at MSDN, there's no onload
event for document
.
You want either window.onload
or document.body.onload
. These are identical in IE: for historical reasons, <body onload="...">
actually sets window.onload
, so MS decided to make document.body.onload
an alias of window.onload
.
The problem with this is - as Eric mentioned in the comments - that there doesn't seem to be a way to manually fire window events, which means that there might not be a solution for Eric's problem.
Solution 2
For some reason, it appears that IE overrides the onload
property of window
with an empty object after the DOM is loaded. At least that is the case when you try to access it from within any event handler of a DOM element...
<!DOCTYPE html>
<html>
<head>
<title>Test by Josh</title>
<script type="text/javascript">
window.onload = function() {
alert("Test");
}
alert(typeof window.onload);
</script>
</head>
<body>
<h1 onclick="alert(typeof window.onload);">Test</h1>
</body>
</html>
In this situation, you'll see that window.onload is recognized as a function initially, then you see the "Test" alert. When you click on the heading, you'll see that window.onload is now an object
. I tried iterating through the properties of the object, but it's empty. This is not cool.
One lame workaround is to grab the function in the accessible scope and assign it to a different property that you can fire at your convenience...
<!DOCTYPE html>
<html>
<head>
<title>Test by Josh</title>
<script type="text/javascript">
window.onload = function() {
alert("Test");
}
</script>
</head>
<body>
<h1 onclick="window.onloadfix()">Test</h1>
<!-- Could potentially be injected via server-side include if needed -->
<script type="text/javascript">
window.onloadfix = function() {
window.onload();
}
</script>
</body>
</html>
I can't think of any other way to address this issue right now.
Eric Bréchemier
I am a Freelance Software Designer for the Web, interested in all kinds of creative things. Feel free to contact me at [email protected] or to connect on LinkedIn.
Updated on December 10, 2020Comments
-
Eric Bréchemier over 3 years
I am currently developing Unit Tests for a Javascript method that detects the readiness of the document. This code is already at framework level, so please avoid mentions of this being already implemented in jQuery or another library.
I have successfully simulated the 'readystatechange' change event with the following code:
var event; event = document.createEventObject(); event.type = 'readystatechange'; document.fireEvent('onreadystatechange',event);
I failed to do the same for the 'load' event. The following code results in an invalid argument error in IE7, thrown by the call to fireEvent on the last line:
event = document.createEventObject(); event.type = 'load'; document.fireEvent('onload',event);
Has anyone done this, or failed to do this before? I am also interested in any suggestion to fire the event in a different way.
Edit: following the suggestion by Crescent Fresh, I changed my code to:
event = document.createEventObject(); event.type = 'load'; document.body.fireEvent('onload',event);
There is no more error, but the listener for 'onload' does not fire. Here is how I configured it:
document.attachEvent('onload',listener);
-
Eric Bréchemier over 14 years@NickFitz Thanks for the answer. I am not trying to change the value of document.readyState, which remains 'complete' before (because I have a wait until readyState becomes 'complete') and after my test. Please keep in mind that this code is written for unit tests.
-
Eric Bréchemier over 14 years@Christoph: good point, already mentioned by Crescent Fresh: I should fire the event on document.body instead. Interesting comment on window.onload but not so helpful since window has no fireEvent method.
-
Crescent Fresh over 14 years@NickFitz: Eric is just trying to simulate the real-world
load
event for local unit tests. -
Eric Bréchemier over 14 years@Christoph thanks for editing your answer. I'll accept it as a conclusion to this interesting discussion.
-
Eric Bréchemier over 14 years@Josh Stodola interesting... I discovered today that document.attachEvent is not a function in IE: you can call it of course, but (typeof document.attachEvent) returns "object" and both document.attachEvent.call and document.attachEvent.apply are undefined... this browser will never stop to surprise me.
-
NickFitz over 14 yearsIf it's for a unit test then you shouldn't need to fire any events at all. Simply create a mock event object with known values and call the event handler directly, then check that it produced the correct results for those values. Otherwise it's not a unit test, it's an integration test: you are testing how the code integrates with the browser's internal event handling mechanisms.
-
Eric Bréchemier over 14 years@NickFitz except I am not unit-testing the event handlers :) I am writing unit tests for a method that replaces and filters the addEventListener and attachEvent on window and document.