jQuery如何从iframe内容中访问iframe的id

Question

jQuery如何从iframe内容中访问iframe的id

5

我正在尝试使用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。但我不知道如何做。感谢每一个对此感兴趣的人。

- sdemirkeser

2个回答

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）上触发它们，那么它们将在正确的上下文中处理。

- hybernaut

你是如何解决 Unsafe JavaScript attempt to access frame with URL...Domains, protocols and ports must match 的问题的？ - Josh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bobince · Accepted Answer

在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);

（由于IE<8不支持它，所以需要使用contentDocument的解决方法；使用try...catch是为了避免安全异常在遇到来自不同域的框架时停止循环。）