Geek Answers Handbook

How to fire the "onload" event in a document in IE

I am currently developing Unit Tests for a Javascript method that determines the readiness of a document. This code is already at the structure level, so please avoid mentioning it already implemented in jQuery or another library.

I successfully modeled the readystatechange change event with the following code:

var event; event = document.createEventObject(); event.type = 'readystatechange'; document.fireEvent('onreadystatechange',event);

I could not do the same for the load event. The following code results in an invalid argument error in IE7 caused by calling fireEvent on the last line:

 event = document.createEventObject(); event.type = 'load'; document.fireEvent('onload',event);

Has anyone done this or not done this before? I am also interested in any suggestion to trigger the event differently.

Edit: as suggested by Crescent Fresh, I changed my code to:

 event = document.createEventObject(); event.type = 'load'; document.body.fireEvent('onload',event);

The error no longer occurs, but the listener for "onload" does not work. Here's how I set it up:

 document.attachEvent('onload',listener);
+7
javascript internet-explorer events unit-testing document
source share
3 answers

According to this page on MSDN there is no onload for document .

You want either window.onload or document.body.onload . They are identical in IE: for historical reasons, <body onload="..."> actually sets window.onload , so MS decided to make document.body.onload alias for window.onload .

The problem with this - as Eric mentioned in the comments - is that there seems to be no way to manually trigger window events, which means that there cannot be a solution to Eric's problem.

+4
source share

For some reason, it seems like IE is overriding the onload window property with an empty object after loading the DOM. At least this is the case when you try to access it from any event handler of the 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 will see that window.onload is first recognized as a function, then you see a "Test" warning. When you click on the title, you will see that window.onload is now an object . I tried to iterate over the properties of the object, but it is empty. Is not cool.

The lame workaround is to capture a function in an accessible area and assign it to another property that you can run at a time convenient for you.

 <!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 another way to solve this problem right now.

+3
source share

A load event will fire when a document (including external resources such as images) is fully loaded, not earlier.

What results do you get from your attempts to shoot readystatechange ? Does the readyState value generally change? Regardless of whether it is small or not: either you readyState event with readyState , which has not changed, or you do it with readyState , which is not a reliable reflection of the state of the document.

0
source share

More articles:


All Articles