Question

As we all know clicking a normal link in an iframe opens up the respective page within the iframe. Now my question is whether there is a way to react to the new page being opened on the page the iframe is within.
Like an iframe.onpagechange event that fires whenever the page within the iframe changes e.g. when a link is clicked.

Is there such event? And if not do you have any suggestions for a possible approach?

Answer 1

In that case then no it’s not possible, not reliably across all browsers.

In the more modern browsers they do allow you to use an ‘onload’ event on the iframe tag itself, and this triggers each time the iframe reloads – i.e. when a link is clicked. However, this isn’t supported on older browsers and there are many websites out there that are designed to break out of frames. If the site breaks out of your frame, you get no load event triggered. On top of this, because you are dealing with an iframe outside of your control/domain that is about all you can do — tell that the frame has loaded — everything else will be blocked from your access.

<iframe onload="iframeLoaded()" src="..." />

Or the better approach would be:

<iframe id="frame" src="..." />

<script>
  window.onload = function(){
    document.getElementById('frame').addEventListener('load', iframeLoaded);
  }
</script>