0

I am loading an iFrame on a page :

<div style="width: 800px; height: 500px; overflow: hidden">
<iframe src="https://mypage.com" width="900px"  style="position: relative; left: -6%; top: -8%"></iframe>

when the iframe loads it contains :

<div id="overlap-root" style="position: absolute; z-index: 150; top: 0px; left: 0px;"></div>

But there wont be anything inside of this div , but depending on the user interaction a popup dialogue can appear and this div can load some classes like:

 <div data-id="SSSearch" style="position: relative; z-index: 35;">
    <div class="_dialog-nonmodal  ui-draggable" style="width: 750px; z-index: 110; left: -46px; top: 49px;">
        <div class="_dialog-error">

Q: Is there any way to detect the load of those classes ? i am trying to change the height of the iframe when the popup dialogue appears, and revert back to normal size when the popup disappears.

Umer
  • 183
  • 2
  • 16
  • this question might help: https://stackoverflow.com/questions/9249680/how-to-check-if-iframe-is-loaded-or-it-has-a-content – GrafiCode Jun 04 '21 at 09:33
  • @GrafiCode thank you for the reply , yeah i tried that before positing the question but it didnt help much , its detecting the load of iframe but i need to detect the class inside of div. and that class can load any time, depending on user interaction so it wont detect the class on load of iframe – Umer Jun 04 '21 at 09:37
  • If the content of the iframe is hosted on a different domain to the parent window then you will not be able to do this as you're attempting to. If you control the content within the iframe then you could detect the element becoming visible there and send a `postMessage()` to the parent window instead. – Rory McCrossan Jun 04 '21 at 09:53

0 Answers0