Question

考虑到我有一个html页面，其中包含以下HTML代码

<div>    
  <iframe src="some_src_link">    
    <iframe src="some_src_link2">   
      //code..
    </iframe>
  </iframe>    
</div>

因此，我想在页面加载时迭代HTML页面内的所有iframe。因为我需要将索引属性设置为每个iframe。类似于HTML代码

    <div>    
      <iframe src="some_src_link" index="0">    
        <iframe src="some_src_link2" index="0-0">   
          <iframe src="some_src_link3" index="0-0-0">   
          </iframe>
        </iframe>
      </iframe> 
<iframe src="some_src_link4" index="1">    
        <iframe src="some_src_link5" index="1-0">   
          <iframe src="some_src_link6" index="1-0-0">   
          </iframe>
        </iframe>
      </iframe>    
    </div>
//INDEX --parentIframe-childIframe-grandchildIframe

我厌倦了简单的jquery方法

$("iframe").map(function(index,iframe){
        if(self == top){ //check for parent iframe

             $(iframe).attr('index',index);
         }else{

             $(iframe).attr('index',index);
         } 
     return iframe;
   });

只能应用索引，例如下面的代码。

<div>    
  <iframe src="some_scr_link" index="0">    
    <iframe src="some_scr_link2" index="0">   
      <iframe src="some_scr_link2" index="0">   
      </iframe>
    </iframe>
  </iframe>    
</div>

我的问题是如何分别像树结构一样对其父iframe进行迭代，并检测iframe是父项还是子项或大子级。并设置索引属性，例如// iframe INDEX --parentIframe-childIframe-grandchildIframe等。请帮助我获取解决方案。

Answer 1

您要尝试的是更改iframe内容。幸运的是你不能。您无法访问iframe中的跨来源域。如果域阻止跨域请求，您将无能为力。

Answer 2

我不能完全确定您要使用此HTML结构做什么，但是无论采用什么结构，您都需要找到不同的方法，因为不可能使用嵌套的iframe代码。这是无效的HTML（或技术上有效但无用的HTML）：

<div>    
  <iframe src="some_src_link">    
    <iframe src="some_src_link2">   
      //code..
    </iframe>
  </iframe>    
</div>

iframe标记的innerHTML仅在不支持iframe的浏览器中显示。给定上述HTML，将显示some_src_link处的页面，并且所有现代浏览器都将忽略尝试嵌入some_src_link2的标签，因为它位于页面的一部分中，将由替换iframe的src内容。

如果仍然存在任何不支持iframe的浏览器，那么在该浏览器中自然会跳过所有iframe，并显示它们的innerHTML（因此，在这种情况下为字符串“ // code ..”。 ”和周围的空白。）

我无法想象为什么首先要嵌套iframe，但是如果这样做，some_src_link的页面将需要包含指向some_src_link2的iframe；您不能直接从父级设置“孙子级”页面。

Answer 3

您的问题出在文档中每个iframe的迭代中。方式是正确的，但是您需要检查iframe是父项还是子项或孙子项。

    function getFrameIndex() {
  let frameINDEX = "";
  let currentWindow = window;
  let currentParentWindow;
  while (currentWindow !== window.top) { // check if parent or not
    currentParentWindow = currentWindow.parent;
    for (let iframeID = 0; iframeID < currentParentWindow.frames.length; iframeID ++)
      if (currentParentWindow.frames[iframeID ] === currentWindow) {
        frameINDEX = ":" + iframeID + frameINDEX ;
        currentWindow = currentParentWindow;
        break;
      }
  }
  frameINDEX = "Parent" + frameINDEX;
  return frameINDEX ; 
}

希望这可能有助于开始

如何使用JavaScript处理嵌套的iframe？

3 个答案: