如何在不知道 id 的情况下从内页获取父 iframe 元素？答案

【问题标题】：How to get parent iframe element from inner page without knowing id?如何在不知道 id 的情况下从内页获取父 iframe 元素？
【发布时间】：2011-03-10 06:18:19
【问题描述】：

假设我有这样的东西：

<html>
...
    <div>
        <iframe src="test.html" hash="r4d5f7"></iframe>
        <iframe src="test.html" hash="8f7x97"></iframe>
        <iframe src="test.html" hash="gg4v5e"></iframe>
        <iframe src="test.html" hash="e54f87"></iframe>
    </div>
...
</html>

test.html 是空页面，自定义hash 属性总是有不同的值，出于安全原因，两个页面在同一个域中，iframe 元素的数量和顺序是随机的。

我的问题是：有没有办法使用 Javascript 从内页 (test.html) 获取其正确的 iframe 元素？假设我在第三个 iframe 的页面中，我需要获取它的 iframe 元素和 alert() 哈希值（在本例中为“gg4v5e”）。

更具体一点。如果您熟悉 Firefox 的 Firebug，它可以像这样可视化这种情况：

<html>
...
    <div>
        <iframe src="test.html" hash="r4d5f7">
            <html>
                 ...
            </html>
        </iframe>
        <iframe src="test.html" hash="8f7x97">
            <html>
                 ...
            </html>
        </iframe>
        <iframe src="test.html" hash="gg4v5e">
            <html>
                 ...
            </html>
        </iframe>
        <iframe src="test.html" hash="e54f87">
            <html>
                 ...
            </html>
        </iframe>
    </div>
...
</html>

当我在内部页面中的<html> 元素处使用我的 Javascript 时，是否可以调用“某物”以获取父元素 (<iframe>)？

【问题讨论】：

标签： javascript jquery html dom iframe

【解决方案1】：

当然有。此代码适用于 FF 和 IE6、Opera、Chrome（需要 Web 服务器以及来自相同域协议和端口的两个文件）

        function getHash()   {
           var ifs = window.top.document.getElementsByTagName("iframe");
           for(var i = 0, len = ifs.length; i < len; i++)  {
              var f = ifs[i];
              var fDoc = f.contentDocument || f.contentWindow.document;
              if(fDoc === document)   {
                 alert(f.getAttribute("hash"));
              }
           }
        }

【讨论】：

Chrome 的服务器、协议和端口要求相同