jquery从iframe内容访问iframe id

jquery从iframe内容访问iframe id,jquery,iframe,selector,Jquery,Iframe,Selector,我正在尝试使用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.

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

$(文档).ready(函数(){
$('#btnIdKim')。单击(函数(){
}); 
});
当用户单击btnIdKim按钮时。我需要访问包含by按钮的父iframe id

但是我不知道怎么做

感谢所有感兴趣的人。

窗口上有一个HTML5(最初是IE扩展)属性:

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);
  $(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);

  });

(有必要使用
contentDocument
解决方法,因为IE基本jQuery搜索函数将使用范围作为第二个参数。它默认为当前文档,但您可以指定不同的文档来跨iframe边界进行搜索。我在以前的项目中这样做过;这可能不是您想要的,但是希望能提供一些提示

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

$('#iframe2', top.document)
听起来您想确定单击事件发生在哪个iframe中,对吗? 我不知道该怎么做,因为我只有一个

为了增加乐趣,下面是我的事件处理程序,用于根据iframe文档的大小调整父文档中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);
  $(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加载)上触发该自定义事件:

起初,我将该事件绑定到$('iframe').ready(),但这在不同的浏览器中是不一致的,最后我从ajax完成处理程序中的几个地方触发了它


另一个重要的注意事项是,如果在iframe中加载jQuery,那么就有几个单独的jQuery实例,而且关于jQuery如何工作的许多假设不再正确(现在是全局的吗?)。这可能非常具有挑战性。我不确定,但我相信如果您使用命名空间事件并在特定文档(即top.document)上触发它们,然后它们将在正确的上下文中进行处理。

您是如何避免不安全的JavaScript尝试使用URL访问框架的…域、协议和端口必须匹配?十年后撰写此评论时,
frameElement
现在确实得到了全球支持。不知道现在支持多久了。