How can I wait until a web page has loaded and all controls have been populated before executing my javascript?

Question

Okay so I know the question reads like I'm yet another person who doesn't know how document.ready works, but this is a bit different.

Basically I'm upgrading an old web forms application that depends on a lot of proprietary IE javascript to something that will work cross platform. One of the changes is migrating from IE's openModalDialog's function to jQuery UI's modal dialogs.

This means I'm on a web page, in an iframe, clicking on a button that triggers "window.open" on another web page that lets a user choose options. When the user chooses an option, the index changed event fires, populating hidden text boxes in the dialog. The contents of these text boxes are supposed to be passed back to "window.opener" and into text boxes on that page.

My problem is that the code that passes these values back to the opener runs before these text boxes are on the DOM, but after the rest of the content in this page has been loaded. This seems to happen even when I use RegisterClientScriptBlock to put the javascript down the bottom of the page, after everything has loaded.

Questions:

When I am using window.opener, and the opener is in an iframe, is the opener the iframe or the document that has opened the iFrame? I think it is the former but I'm not sure
How do I wait until after the text boxes have been populated before returning their values to the opener?
Becuase I'm just passing values back to the opener, is there a better way of doing this? The code behind on the index changed function is just pulling text from the database, to be plugged into those text boxes.

Any help would be great.

R. McManaman · Answer 1 · 2017-05-23T21:43:46.657

To answer your second question, you should be able to use the onLoad property. Documentation here.

To give an oversimplified example of it in use:

<!doctype html>
<html>
  <head>
    <title>onload test</title>
    <script>
      function load() {
        console.log("load event detected!");
      }
      window.onload = load;
    </script>
    <script>
      const load = () => {
        console.log("load event detected!");
      } 
      window.onload = load; 
    </script>
  </head>
  <body>
    <p>The load event fires when the document has finished loading!</p>
  </body>
</html>

You might also consider using document.onLoad. Here's an explanation of the difference stolen from window.onload vs document.onload:

window.onload

By default, it is fired when the entire page loads, including its content (images, css, scripts, etc.)

In some browsers it now takes over the role of document.onload and fires when the DOM is ready as well.

document.onload

It is called when the DOM is ready which can be prior to images and other external content is loaded.

To expand further on the difference between ready and onload, the ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.

How can I wait until a web page has loaded and all controls have been populated before executing my javascript?

1 Answers1