How to wait for loading of DOM of all frames in Javascript

Question

I've a page with multiple iframes. I want to proceed only when DOM of all the iframes is ready.

I've read here all the solutions. But all talk about using jQuery.load or onload property which waits to download everything like CSS, Images etc which I don’t want.

What is the way to do it?

I don't have access to the Iframes as I'm using Google Chrome Extension content script for automation

As of now I'd not like to use this method:

$(document).ready(function () {
    $("#frame1").load(
            function () {
                $("#frame2").load(function () {
                    console.log("Loaded both frame1 & 2");
                });
            }
    );
});

You want to wait for the DOM of the iframes to be ready but not to wait for the images or CSS? Have you tried anything? — putvande, Feb 01 '16 at 12:15
Yes I want something like $(document).ready for the iframes. — user5858, Feb 01 '16 at 12:18
If this is a Chrome extension, could you not inject a content script to each iframe too? This could listen for the `DOMContentLoaded` event and use [message passing](https://developer.chrome.com/extensions/messaging) to notify the parent window. — Jim O'Brien, Feb 01 '16 at 12:35
@JimO'Brien that's good idea but then I'll have to handle every frame in each site containing frames. Code maintenance will increase — user5858, Feb 01 '16 at 12:36
It shouldn't be too much more complex, although you would need a wildcard permission for all sites that could appear in one of these iframes. What exactly are you trying to achieve in a larger sense? — Jim O'Brien, Feb 01 '16 at 12:39
@JimO'Brien I'm doing some automation on each page like autofill and autoclicks. Working on smaller frame part will be difficult to even identify a page correctly and then populate fields in the whole page. — user5858, Feb 01 '16 at 12:47
In theory, each additional page should not add too much more complexity - the only differentiation you would need to make would be between parent and child frames. That said, unless you can show me off a jsfiddle or similar, I don't think anyone can help further :o — Jim O'Brien, Feb 01 '16 at 17:31

score 2 · Answer 1 · answered Feb 01 '16 at 12:14

I have done different things in the past (depending on use case).

If scope is not browser, you may find that instead of attach load listener to document, attach it to the window.

window.addEventListener('load', myFunc, false)

In browser scope, in the load event listener you can check if its the top most document that loaded like this:

function myFunc(e) {
   var win = e.originalTarget.defaultView)
   if (win.frameElement) {
       // this is a frame
   }
}

score 1 · Answer 2 · answered Feb 01 '16 at 12:19

1

You can use JS defer attribute to make the DOM get parsed first. Example:

<script src="your.js" async></script>

Learn about it here: http://www.w3schools.com/tags/att_script_defer.asp

Also there is async attribute which loads Js asynchronously , see if you need it.

answered Feb 01 '16 at 12:19

Siddhartha Chowdhury

2,273
1
22
37

This could be a solution, but when it is not possible to load JS deferred or asynchronously, it will be loaded and executed as soon as possible so it may not be a good way to depend it its deferring. – Radek Pech Feb 01 '16 at 12:21
yea thats true but I have never seen it failing though. – Siddhartha Chowdhury Feb 01 '16 at 12:23

score 0 · Answer 3 · answered Feb 01 '16 at 12:18

If you can edit the code of the iFrame page, put a JS to the end of the page that will call a method of the parent window.

</body></html>
<script>window.top.registerLoadedIframe(window);</script>

Then the registerLoadedIframe in the main window can just count how many iframes were already loaded and react to them.

How to wait for loading of DOM of all frames in Javascript

3 Answers3