包含具有相同 URL 的另一个 IFRAME 的 IFRAME 是否有限制？答案

【问题标题】：Is there a limitation on an IFRAME containing another IFRAME with the same URL?包含具有相同 URL 的另一个 IFRAME 的 IFRAME 是否有限制？
【发布时间】：2011-08-21 12:42:32
【问题描述】：

为了稍微玩一下框架层次结构，我编写了一个小 html 页面，它允许嵌套任意数量的框架（代码在问题末尾提供）。

但这不起作用，在 IE9 和 Firefox 4 上，内部框架被创建但不呈现（head 和 body 为空）：

在 Chrome 上，它适用于两个级别，然后如果我单击内部框架上的 Add 按钮，则没有任何反应（控制台中也没有错误消息）。

如果我复制文件N 次并让每个文件使用不同的文件，它适用于任何深度（但如果有循环则不行）。

我试图搜索这样的限制，但我一定没有使用正确的关键字。有人对此有任何参考吗？

这是 addRemoveFrames.html 文件：

<!DOCTYPE html>
<html>
<head>
    <title>Add and Remove Frames</title>
    <script type="text/javascript">
        function add() {
            var f = document.createElement('iframe');
            f.src = 'addRemoveFrames.html';
            document.getElementById('frameContainer').appendChild(f);
        }
        function remove() {
            var c = document.getElementById('frameContainer');
            var f = c.lastChild;
            if (f)
                c.removeChild(f);
        }
    </script>
</head>
    <body>
        <input type="button" onclick="add()" value="Add"/>
        <input type="button" onclick="remove()" value="Remove"/>
        <hr />
        <div id="frameContainer"></div>

    </body>
</html>

我稍微修改了@davin 的答案，因此每个框架的 URL 都反映了其在层次结构中的完整路径。

var counter = 0;
function add() {
    var f = document.createElement('iframe');
    var sep = location.search ? (location.search + '.') : "?";
    f.src = 'addRemoveFrames.html' + sep + ++counter;
    document.getElementById('frameContainer').appendChild(f);
}

【问题讨论】：

不投票为骗子，因为它没有深入回答问题，但相关：iframe to infinity
@Pekka，我不确定这是不是同一件事，我不是想通过添加IFRAME 对象本身来进行无限递归，我正在创建一个新的IFRAME具有相同的来源 (document.createElement)。
啊，好的。不过，我认为这是相同的安全机制。很有趣。
这太疯狂了。显然不允许无限溢出。一种看起来可行的解决方法是添加一个无用的查询参数，例如 f.src = 'addRemoveFrames.html?id=' + id++; 奇怪的是，尽管您必须等待几秒钟才能添加新参数才能使其正常工作

标签： javascript html dom iframe

【解决方案1】：

看起来像是一种合理的浏览器安全机制，可以防止嵌套 iframe 的无限循环（即使在您的情况下它不会是无限的）。

无论如何，一个简单的解决方法是在 url 中添加一个无用的查询参数，让浏览器认为加载的页面不一样，但实际上确实如此。

所以不是你当前的函数add()，而是这样的（我全力以赴，所以id不会污染全局命名空间）：

var add = (function(){

  var id = 0;
  return function(){
     var f = document.createElement('iframe');
     f.src = 'addRemoveFrames.html?useless=' + id++;
     document.getElementById('frameContainer').appendChild(f);
  };

})();

【讨论】：

【解决方案2】：

这是官方参考：Implementing HTML Frames - W3C Working Draft 31-Mar-97。标题是“无限递归”，并指出如果 src 等于父 URL，则应将其视为空。

我会推荐 davin 使用的技术，或者使用纯 DOM 来创建嵌套元素而不是 IFRAMEs，这将使编程更改更容易并可能使用更少的内存，并避免延迟加载的问题。

【讨论】：

【解决方案3】：

我用chrome测试过，最大图片嵌套是4。第二个“asd”（红色的）里面是一个iframe，但是是空的

如果我包含第三页，则嵌套增加

结论：取决于url，如果嵌套UNIQUE url的数量不限，可以无限嵌套

【讨论】：