How to fire “onload” event on document in IE

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);

标签： javascript unit-testing internet-explorer events document

3条回答

何必那么认真

2楼-- · 2019-02-22 03:05

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.

0人赞添加讨论(0) 举报

Root（大扎）

3楼-- · 2019-02-22 03:11

The load event will fire when the document (including external resources such as images) has fully loaded, and not before.

What results are you getting from your attempts to fire readystatechange? Does the readyState value actually change at all? Whether or not, that's not of much use either: either you fire the event with a readyState that hasn't changed, or you do so with a readyState that isn't a valid reflection of the state of the document.

0人赞添加讨论(0) 举报

How to fire “onload” event on document in IE

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间