1

I have an iframe with an independent page displayed inside. What i need is an eventhandler on the outer page to be executed when somehow the location/url inside the iframe is changed (like when clicking a link on the inner page that leads to another page, which is then displayed again inside the frame). It should fire when the new DOM is loaded.

Currently I use jQuery's load() function according to this stack overflow question

$("#iframe").load(function(){console.log("iframe loaded");})

This works well but it fires only when the content is completely loaded, including images etc. What I am looking for is a handler that fires when only the DOM is ready (without images), like the ready() function. I already tried

var iframe = document.getElementById('frame'),
    iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
$(iframeDoc).ready(function(){console.log("iframe loaded");}

but it did not work.

Does somebody have an idea?

Felix
  • 43
  • 1
  • 8
  • If the iframe comes from another domain, browser will not allow you to access it. The iframe should send an event when it is loaded. The parent window should react on this event. – mentallurg Jun 01 '18 at 16:39
  • its the same domain, so there should be no problems. It works when I use the load() function, but I need a handler that fires when only the DOM is ready and not the whole page. Do you have a suggestion? – Felix Jun 01 '18 at 16:43
  • Embed the trigger on DOM is ready in your frame and send an event via postMessage to the parent window. – mentallurg Jun 01 '18 at 17:59
  • Do you mean embed in the inner page? The problem is that it should work without manipulating the inner pages. – Felix Jun 01 '18 at 18:05
  • Yes, I mean embedding you JavaScript into the inner page. I don't see other options. – mentallurg Jun 01 '18 at 19:18

0 Answers0