Call back on window object initialization (dynamic inclusion of iframes in page)

Question

What I need: My requirement is to inject script in to all windows that are presented in a web page.

I know we can find all windows by using window.frames property, but that won't be sufficient in my case since new windows can be added later to the page via iframes (inclusion of iframes in to the DOM)

So I need a mechanism to track windows in a page, something like callback on new window initialization.

What I tried: I used Object.observe API to track the window.frames object changes. But I came to know that Object.observe API is going to be removed as per this link (https://esdiscuss.org/topic/an-update-on-object-observe).

So, is it good to use this API. Or if any alternate way is there please let me know

Do you know about cross origin frames? or all iframes will be with the same origin as your top document? — udidu, Dec 24 '15 at 06:51
How are you creating new windows? There must be some event like `addFrame` or something. right? Also not sure but you can try using a delegate for onload function for all `iFrames` — Rajesh, Dec 24 '15 at 06:52
@udidu, What ever the windows I can access there only I need inject the scripts. So need to bother about cross origin frames. — kalki, Dec 24 '15 at 06:53
You need to know that if you have a window inside an iframe with different origin, you won't be able to inject anything — udidu, Dec 24 '15 at 06:54
@Rajesh New windows will be created if we append iframes to the existing page. Event delegation will work in the context of particular document (per window). — kalki, Dec 24 '15 at 06:55
@udidu That is not a big deal, I already consider that scenario. — kalki, Dec 24 '15 at 06:56
Kindly check following post https://stackoverflow.com/questions/5788499/jquery-iframe-load-event — Rajesh, Dec 24 '15 at 07:12

score 2 · Accepted Answer · answered Dec 24 '15 at 07:18

Here is a way using MutationObserver API, you can use the api to detect any element injected into your target element, even when a text is change or element is appended somewhere in your target tree

function createIframeOnDemand(wait) {
  var iframe = document.createElement('iframe')
  iframe.src = 'about:blank';
    
  setTimeout(function() {
    document.body.appendChild(iframe)
  }, wait || 2000);
}


var body = document.body;

var observer = new MutationObserver(function(mutations) {
  for(mutationIdx in mutations) {
     var mutation = mutations[mutationIdx];
     for(childIndex in mutation.addedNodes) {
       var child = mutation.addedNodes[childIndex];
       
       if(child.tagName && child.tagName.toLowerCase() == 'iframe') {
         console.log(child);
         //child is your iframe element
         //inject your script to `child` here
       }
     }
  }
});

var config = { attributes: false, childList: true, characterData: false };
 
observer.observe(body, config);


createIframeOnDemand();

Thanks for your effort to share the code. As per documentation the callback function will be called on each DOM mutation. Do it cause any performance issues? — kalki, Dec 24 '15 at 09:06

Call back on window object initialization (dynamic inclusion of iframes in page)

1 Answers1