jQuery jquery从iframe内容访问iframe id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4097870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery access iframe id from iframe content
提问by sdemirkeser
i am trying to do something with jquery.
我正在尝试用 jquery 做一些事情。
i have code like this 1.html;
我有这样的代码 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>
in 2.html file. i am trying to access iframe container id. 2.html file content;
在 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>
when user clicked btnIdKim Button. i need to access parent iframe id which contains by button.
当用户单击 btnIdKim 按钮时。我需要访问包含按钮的父 iframe id。
but i dont know how.
但我不知道如何。
Thanks for every one who interested in.
感谢每一位感兴趣的人。
回答by bobince
There is an HTML5 (originally IE extension) property frameElementon window:
有一个HTML5（原IE扩展）属性frameElement上window：
alert(frameElement.id);
But this is not globally supported; you won't get it in Google Chrome (at the time of writing; version 7) or in older versions of the other popular non-IE browsers.
但这不是全球支持的；您不会在 Google Chrome（在撰写本文时；版本 7）或其他流行的非 IE 浏览器的旧版本中获得它。
Without this extension, you have to do it manually. Go to the parent window, and search through all its iframes to see if the document contained within is your own document:
如果没有这个扩展，你必须手动完成。转到父窗口，并搜索其所有 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);
(The contentDocumentworkaround is necessary because IE<8 doesn't support it; the try...catchis needed to avoid security exceptions stopping the loop when it meets a frame from a different domain.)
（contentDocument解决方法是必要的，因为 IE<8 不支持它；try...catch需要避免安全异常在遇到来自不同域的帧时停止循环。）
回答by hybernaut
The base jQuery search function will take a scope as a second param. It defaults to the current document, but you can specify a different document to search across iframe boundaries. I have done this for a previous project; this may not be exactly what you're looking for, but hopefully provides some hints.
基本 jQuery 搜索函数将范围作为第二个参数。它默认为当前文档，但您可以指定不同的文档以跨 iframe 边界进行搜索。我为以前的项目做过这个；这可能不是您正在寻找的内容，但希望能提供一些提示。
From within an iframe you can access the top window's document like this:
从 iframe 中，您可以像这样访问顶部窗口的文档：
$('#iframe2', top.document)
It sounds like you want to determine in which iframe did the click event occur, right? I'm not sure exactly how to do that, as I had only one
听起来您想确定点击事件发生在哪个 iframe 中，对吗？我不确定如何做到这一点，因为我只有一个
For bonus fun, here's my event handler for resizing the iframe element in the parent doc based on the size of the iframe document:
为了额外的乐趣，这是我的事件处理程序，用于根据 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);
});
You then trigger that custom event on events that might change the document height (like ajax loading):
然后在可能更改文档高度的事件上触发该自定义事件（如 ajax 加载）：
$(top.document).trigger('ResultsFrameSizeChanged:hybernaut');
At first I was binding that event to $('iframe').ready(), but this was inconsistent across browsers, and I ended up triggering it from several places within the ajax completion handlers.
起初我将该事件绑定到 $('iframe').ready()，但这在浏览器之间不一致，我最终从 ajax 完成处理程序中的多个位置触发它。
Another important note is that if you load jQuery in your iframes, then you have several separate instances of jQuery, and many of your assumptions about how jQuery works are no longer correct (what's global now?). This can be very challenging. I'm not certain, but I believe that if you use namespaced events and trigger them on a specific document (i.e. top.document), then they will be handled in the correct context.
另一个重要的注意事项是，如果您在 iframe 中加载 jQuery，那么您将拥有多个单独的 jQuery 实例，并且您对 jQuery 工作方式的许多假设不再正确（现在什么是全局的？）。这可能非常具有挑战性。我不确定，但我相信如果您使用命名空间事件并在特定文档（即 top.document）上触发它们，那么它们将在正确的上下文中处理。
