How to identify the document content which is created dynamically inside iframe

user_9797968 0
Viewed 41

How to identify document content which is created under dynamic iframe code structure

<div id="test" data-parent-url="/test.html" data-iframe-src="/test-header.html" class="sample-header">
// dynamically created iframe element 
<iframe style="border-style: none; width: 100%; height: 105px; display: block;" scrolling="no" id="V1__header" src="/test-header.html">
//  dynamically loaded document content 
</iframe>
</div>

tried:

var ifrme = document.getElementById('V1__header');
var iframeContent = ifrme.contentWindow.document;
var iframeObj = $(iframeContent);
var contentheight = $(iframeObj.find(selector)[0]).height();

ifrme returns null intermittently, Couldnot find the id. Is there any alternative to find the id and the document content which is creted dynamically in code.

iframe html jquery javascript
2 Answers

if you cant be sure the iframe is loaded, you could wait by testing at time interval:

var timer = setInterval(function(){
  if($('#V1__header').length !=0){
     clearIntervall(timer);
     Identifydoc();
  }
},400);

function idnetifyDoc(){

 var ifrme = document.getElementById('V1__header');
 var iframeContent = ifrme.contentWindow.document;
 var iframeObj = $(iframeContent);
 var contentheight = $(iframeObj.find(selector)[0]).height();
}
user_73807790

You can use onload callback:

  const ifrme = document.getElementById('V1__header');
  ifrme.onload = iframeLoaded;
  
  function iframeLoaded() {
    //--> logic
  }

Add the script inside the body tag.

user_143498080
Related