Raphael Schimchowitsch Raphael Schimchowitsch - 1 year ago 100
HTML Question

MutationObserver div change src

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>


<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? :/

Answer Source

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 */