返回页面中所有 iframe 的 ID答案

【问题标题】：Return ID of all iframes in a page返回页面中所有 iframe 的 ID
【发布时间】：2013-09-19 07:54:03
【问题描述】：

由于我正在使用的小部件格式，我有一个页面，该页面在 iframe 中嵌入了多个 iframe。我不会粘贴代码，因为它庞大且笨拙，但本质上就是这样：

<html>
    <head></head>
    <body>
        <iframe>
            <html>
                <head></head>
                <body>
                    <iframe>
                        <html>
                            <head></head>
                            <body>
                                <iframe>
                                    <html>
                                        <head></head>
                                        <body>
                                        blah
                                        </body>
                                    </html>
                                </iframe>
                            </body>
                        </html>
                    </iframe>
                </body>
            </html>
        </iframe>
    </body>
</html>

但是，根据我使用的页面和模板，可能会有更多或更少的 iframe。

因此，我试图从最嵌入的 iframe 中获取此页面中所有 iframe 的 ID。

这可以用 jQuery 实现吗？我尝试了一些 sn-ps 代码，但没有运气：

$('iframe', window.parent.document).each(function() {
    console.log($(this).attr("id"));
});

$('iframe', parent.document).each(function() {
    console.log($(this).attr("id"));
});

$('iframe').each(function() {
    console.log($(this).attr("id"));
});

这些输出是单个 ID 字符串 - 不幸的是，它不是我想要控制的 iframe。

提前致谢，

【问题讨论】：

这真是令人印象深刻，在发布问题后的 14 秒内投了反对票...... :) 有什么原因吗？
iframes 是否都在同一个域中？
RGraham：是的，他们是。

标签： javascript jquery iframe

【解决方案1】：

已编辑

如果未找到所需的id，则返回具有所需id 和null 的iframe 元素。

function searchIds(wantedId) {
    var idArray = [], n,
        search = function (iframes) {
            var n;
            for (n = 0; n < iframes.length; n++) {
                if (iframes[n].frames.length > 0) {
                    search(iframes[n].frames);
                }
                idArray.push(iframes[n].frameElement.id);
                idArray.push(iframes[n].frameElement);
            }
        };
    search(window.top.frames);
    for (n = 0; n < idArray.length; n += 2) {
        if (idArray[n] === wantedId) {
            return idArray[n + 1];
        }
    }
    return null;
}

注意，searchIds() 在主窗口的onload 被触发之前无法运行。

【讨论】：

哦，抱歉，还有一件事（有点跑题了）——我现在可以看到我的 iframe 的 ID，我该如何“使用”它？ IE。在 jQuery 中，我会使用 $('iframe#stuff', window.top.frames) 之类的东西，但这似乎没有任何作用。
@dunc 我正要问你，你将如何使用id :)。请稍等，我将编辑我的答案。
提姆我的朋友，你是个传奇。在接下来的几天里，我会给你一些赏金积分，感谢你的额外努力 - 非常感谢。
这并没有真正回答这个问题（不过，我并不是在争论它是否有有价值的内容）。 window.top.frames 只会回答，但它可以生成跨域访问。
@ribamar 这回答了当所有 OP 的 cmets 都包含在问题中时的问题 ...

【解决方案2】：

我不相信你可以直接引用 iframe 的孩子。您需要使用 .contents() 调用递归搜索每个 iframe。

据我所知，这只有在不违反同源策略（即 iframe 必须指向同一个域）的情况下才有效。

【讨论】：

抱歉，Maxim Kumpan，这不是走错路了吗？我正在尝试从最嵌入的 iframe 操作父 iframe（即我的小部件是“底部”iframe）。

【解决方案3】：

来自最嵌入的 iframe：

var ids = (function up( context, ids ){ 
   ids = ids || []; 
   // proceed if we're not at the top window yet
   if( context !== window.top){
      // point context to parent window (or top if no parent).
      context = context.parent || window.top; 
      // get the id of the first iframe in parent window; 
      // this will break if there are sibling iframes
      ids.push(context.document.getElementsByTagName('iframe')[0].id); 

      // recursive call to traverse parents          
      return up(context, ids); 
   } else {
      // otherwise return the list of ids
      return ids; 
   }
   }(this)); // 'this' is the initial context - current window

   console.log( ids );

【讨论】：

看起来这样每个窗口只能找到一个iframe。
现在尝试实现您的代码，但(this)); 在; 之前返回一个关于缺少; 的语法错误... 对我来说没有多大意义，所以我'不知道如何解决它！
@dunc 抱歉，在else 之后忘记了}，现在已修复。
恐怕只会为我 pawel 返回一个单帧 ID。 @Teemu 的回答返回了所有这些（奇怪的是，在这个页面上有七个）。
@dunc 是的，Teemu 的回答很棒，可能是你想要的，而不是我认为你想要的；）我遍历树，从最嵌入的框架到顶部窗口，而 Teemu 查找窗口中的每个 iframe，而不管它与调用它的框架的关系如何。