来自iframe内容的jquery访问iframe id

我想用jquery做点什么。

我有这样的代码1.html;

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

     $(document).ready(function (){ $('#btnIdKim').click(function (){ }); });       

当用户点击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 <8不支持它;需要try…catch以避免安全exception在遇到来自不同域的帧时停止循环。）

Answer 2

基本jQuery搜索function将范围作为第二个参数。 它默认为当前文档，但您可以指定不同的文档来搜索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）上触发它们，那么它们将在正确的上下文中处理。