0

I was wondering, I have a div in a htm page(1) that open and display another htm file(2). And I have areas on this page(2). When I click on those areas, it open another page in the div.

I was wondering if there is a way in native JS using a MutationObserver to observe this kind of modification and do something everytime it happen?

I Work on IE11 exclusively.

Page 1 :

<div id="one">
    <iframe src="index.htm" style="width:100%; height:100%;" alt=""   id="fram"> </iframe>
</div>

Index.htm

<img src="../assets/SM2.png" usemap="#Tr" id="draggable" class="dragme"  onload="initiate()">
<map name="Tr" style="z-index=1;" id="mapping">
<area title="2" shape="circle" coords="6426,4171,8" href="2/Tr.xml">
...

And the thing would occur when I click on the area in Index.htm.

I couldn't find the solution on internet since this is a very particular question /:

Thanks in advance!

Have a nice evening!

EDIT 1: Is it possible do it in some awful way such as using "OnPropertyChange" and when I click on the area, I call a function that change some properties in my page? :/

Raph Schim
  • 528
  • 7
  • 30
  • Didn't test this, but shouldn't `onload` on the iframe fire whenever its URL changes? – Siguza Jun 29 '16 at 13:50
  • Aaaaah! Effectively, it seems to be working, I was just doing the bad thing! You seems to be a geniius! :) Thanks a lot! – Raph Schim Jun 29 '16 at 14:00

1 Answers1

1

Alright, I'll post this as an answer then:

You can simply listen for the load event on your iframe, as it should be fired each time a (new) pages has finished loading:

document.getElementById('fram').addEventListener('load', function()
{
    /* this is called on the iframe's first load,
       and every time it has finished loading a new page */
});
Siguza
  • 21,155
  • 6
  • 52
  • 89