jquery从iframe内容访问iframe id答案

【问题标题】：jquery access iframe id from iframe contentjquery从iframe内容访问iframe id
【发布时间】：2010-11-04 14:50:02
【问题描述】：

我正在尝试用 jquery 做一些事情。

我有这样的代码 1.html;

<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
</head>
<body>
<iframe src="2.html" id="frame1"></iframe>
<iframe src="3.html" id="frame2"></iframe>
</body>
</html>

在 2.html 文件中。我正在尝试访问 iframe 容器 ID。 2.html文件内容；

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    $('#btnIdKim').click(function (){
    }); 

});
</script>
</head>
<body>
<input type="button" name="btnIdKim" id="btnIdKim" value="Id Kim" />
</body>
</html>

当用户点击 btnIdKim 按钮时。我需要通过按钮访问包含的父 iframe id。

但我不知道怎么做。

感谢每一位感兴趣的人。

【问题讨论】：

标签： jquery iframe selector

【解决方案1】：

window 上有一个 HTML5（最初是 IE 扩展）属性frameElement：

alert(frameElement.id);

但这不是全球支持的；您不会在 Google Chrome（撰写本文时；版本 7）或其他流行的非 IE 浏览器的旧版本中获得它。

没有这个扩展，你必须手动完成。转到父窗口，并搜索其所有 iframe 以查看其中包含的文档是否是您自己的文档：

function getFrameElement() {
    var iframes= parent.document.getElementsByTagName('iframe');
    for (var i= iframes.length; i-->0;) {
        var iframe= iframes[i];
        try {
            var idoc= 'contentDocument' in iframe? iframe.contentDocument : iframe.contentWindow.document;
        } catch (e) {
            continue;
        }
        if (idoc===document)
            return iframe;
    }
    return null;
}

alert(getFrameElement().id);

（contentDocument 变通方法是必要的，因为 IEtry...catch 以避免在遇到来自不同域的帧时停止循环的安全异常。）

【讨论】：

十年后撰写此评论时，frameElement 现在确实在全球范围内得到支持。不知道多久了。

【解决方案2】：

基本的 jQuery 搜索功能将范围作为第二个参数。它默认为当前文档，但您可以指定不同的文档以跨 iframe 边界进行搜索。我为以前的项目做过这个；这可能不是您想要的，但希望能提供一些提示。

在 iframe 中，您可以像这样访问顶部窗口的文档：

$('#iframe2', top.document)

听起来您想确定点击事件发生在哪个 iframe 中，对吧？我不确定该怎么做，因为我只有一个

为了获得额外的乐趣，这是我的事件处理程序，用于根据 iframe 文档的大小调整父文档中 iframe 元素的大小：

  $(document).bind('ResultsFrameSizeChanged:hybernaut', function(event){
    var iframe = $('#results', top.document)[0];

    if(iframe.contentDocument){ // IE
        var height = iframe.contentDocument.body.offsetHeight + 35;
    } else {
        var height = iframe.contentWindow.document.body.scrollHeight;
    }

    // konsole.log("Setting iframe height to " + height);
    $(iframe).css('height', height);

  });

然后，您可以在可能更改文档高度的事件（如 ajax 加载）上触发该自定义事件：

$(top.document).trigger('ResultsFrameSizeChanged:hybernaut');

起初我将该事件绑定到 $('iframe').ready()，但这在浏览器中不一致，最终我从 ajax 完成处理程序中的多个位置触发它。

另一个重要的注意事项是，如果您在 iframe 中加载 jQuery，那么您将拥有多个单独的 jQuery 实例，并且您对 jQuery 工作方式的许多假设不再正确（现在什么是全局的？）。这可能非常具有挑战性。我不确定，但我相信如果您使用命名空间事件并在特定文档（即 top.document）上触发它们，那么它们将在正确的上下文中处理。

【讨论】：

您是如何解决的不安全的 JavaScript 尝试使用 URL 访问框架...域、协议和端口必须匹配？