Question

我正在尝试用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。

但我不知道如何。

感谢所有感兴趣的人。

Answer 1

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

alert(frameElement.id);

但这并不是全球支持的;你不会在谷歌浏览器中（在撰写本文时;第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解决方法是必要的，因为IE＆lt; 8不支持它;需要try...catch以避免安全异常在遇到来自不同域的帧时停止循环。）< / p>

Answer 2

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

在iframe中，您可以访问顶部窗口的文档，如下所示：

$('#iframe2', top.document)

听起来你想确定Click事件发生了哪个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）上触发它们，那么它们将在正确的上下文中处理。

来自iframe内容的jquery访问iframe id

2 个答案: