如何识别在 iframe 中动态创建的文档内容

Posted 2023-05-09

【中文标题】如何识别在 iframe 中动态创建的文档内容

【英文标题】：How to identify the document content which is created dynamically inside iframe

【发布时间】：2021-05-16 04:16:44

【问题描述】：

如何识别在动态 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>

试过了：

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

ifrme 间歇性返回 null，找不到 id。有没有其他方法可以找到在代码中动态创建的 id 和文档内容。

【问题讨论】：

有没有办法使用Jquery识别文档内容

【参考方案1】：

如果您不能确定 iframe 是否已加载，您可以通过按时间间隔进行测试来等待：

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();

【参考方案2】：

你可以使用onload回调：

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

在正文标签内添加脚本。