在 jQuery 中检索文档的父 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12114243/
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
Retrieving a document's parent iframe in jQuery
提问by larryq
I have a page with an iframe that has an html document within it. I need to access the iframe's id from that child document, and am having no luck getting at it with jQuery. The essential structure is this within my page:
我有一个带有 iframe 的页面，其中包含一个 html 文档。我需要从该子文档访问 iframe 的 id，并且我没有使用 jQuery 获得它。我的页面中的基本结构是这样的：
<div id="ContainingDiv">
<iframe id="ContainingiFrame">
<html>
<head></head>
<body>
</body>
</html>
</iframe>
</div>
In my javascript method I can get to anything in the <body>tags using jQuery selectors, but cannot retrieve the iframe element in order to resize it. I've tried a few things but am admittedly not an expert in jQuery DOM navigation, particularly where iframes are involved (the iframe is in the same domain as the containing page.) Is there a way I can do this?
在我的 javascript 方法中，我可以<body>使用 jQuery 选择器访问标签中的任何内容，但无法检索 iframe 元素以调整其大小。我已经尝试了一些东西，但我承认我不是 jQuery DOM 导航方面的专家，特别是在涉及 iframe 的地方（iframe 与包含页面在同一个域中。）有没有办法做到这一点？
回答by jfriend00
No need for jQuery at all. To get the body object of your parent, you can do this:
根本不需要jQuery。要获取父对象的 body 对象，您可以执行以下操作：
var parentBody = window.parent.document.body
If it's on the same domain as your iframe that you are running the code from, once you have that, you can use normal javascript on that object:
如果它与运行代码的 iframe 位于同一域中，那么一旦拥有该域，就可以在该对象上使用普通的 javascript：
window.parent.document.getElementById("ContainingiFrame").style.height = "400px";
or with jQuery:
或使用 jQuery：
$("#ContainingiFrame", parentBody).height("400");
Here's an article on resizing an iframe from within the iframe with sample code: http://www.pither.com/articles/2010/11/12/resize-iframe-from-within
这是一篇关于从 iframe 中使用示例代码调整 iframe 大小的文章：http: //www.pither.com/articles/2010/11/12/resize-iframe-from-within
And, a related question/answer on resizing an iframe based on it's own content: Resizing an iframe based on content
并且，关于根据自己的内容调整 iframe大小的相关问题/答案：根据内容调整 iframe 的大小
回答by Gil Zumbrunnen
To access the parent's document from your iframeyou can add a parameter to your selectors, default is document but nothing prevents you from changing the context to window.parent.document like this :
要从iframe 访问父文档，您可以向选择器添加一个参数，默认为文档，但没有什么可以阻止您将上下文更改为 window.parent.document 如下：
$('#ContainingiFrame', window.parent.document).whatever();
Or add it before your selector :
或者在选择器之前添加它：
window.parent.$('#ContainingiFrame').whatever();
回答by Alexis Wilke
If you do not have information about the iframe (such as an identifier to query with) then you want to use the frameElementof the window as follow:
如果您没有关于 iframe 的信息（例如要查询的标识符），那么您想使用窗口的frameElement如下：
var iframe_tag_in_parent_window = window.frameElement;
Now you have the iframe tag itself and can work with it directly in JavaScript.
现在您拥有 iframe 标签本身，并且可以直接在 JavaScript 中使用它。
To use jQuery instead of plain JavaScript, you use the following:
要使用 jQuery 而不是纯 JavaScript，请使用以下命令：
var iframe_in_jquery = jQuery(window.frameElement, window.parent.document);
We just talked about the first part (window.frameElement). The second part is the context in which jQuery will find the element and wrap it. This is the parent document of our current window.
我们刚刚谈到了第一部分（window.frameElement）。第二部分是 jQuery 将在其中找到元素并将其包装起来的上下文。这是我们当前窗口的父文档。
For example, if you have a unique id in the iframetag you could do:
例如，如果您在iframe标签中有一个唯一的 id，您可以执行以下操作：
var iframe_in_jquery = jQuery(window.frameElement, window.parent.document),
id = iframe_in_jquery.attr("id");
Now idis the identifier if the iframeyour JavaScript code is running into.
id如果iframe您的 JavaScript 代码正在运行，现在是标识符。
P.S. if window.frameElementis null or undefined, then you are not in an iframe.
PS 如果window.frameElement为空或未定义，则您不在iframe.
P.P.S note that to run code in the parent window, you may need to use the parent instance of jQuery(); this is done using window.parent.jQuery(...). This is particularly true if you try to trigger()an event!
PPS 请注意，要在父窗口中运行代码，您可能需要使用jQuery();的父实例。这是使用window.parent.jQuery(...). 如果您尝试参加trigger()活动，则尤其如此！
P.P.P.S. make sure to use window.frameElementand not just frameElement... some browsers are somewhat broken and they will not always be able to access the correct data if not fully qualified (although in 2016 that problem may be resolved?)
PPPS 确保使用window.frameElement而不仅仅是frameElement......一些浏览器有些损坏，如果不完全合格，它们将无法始终访问正确的数据（尽管在 2016 年该问题可能会得到解决？）
回答by Oscar Jara
Try this:
尝试这个：
Resize some element inside iframe:
调整里面的一些元素的大小iframe：
$('#ContainingiFrame', window.parent.document).find('#someDiv').css('height', '200px');
Or just resize the iframe:
或者只是调整大小iframe：
$('#ContainingiFrame', window.parent.document).height('640');
回答by Shankar Cabus
Try this:
尝试这个：
$("#ContainingiFrame").contents().find("#someDiv");
回答by Shubanker
If you have a reference of element within iframeand need to find its parent iframeespecially when you have more than one iframes, here is a way of finding it.
如果你有一个元素的引用iframe并且需要找到它的父元素，iframe尤其是当你有多个 iframe 时，这里是一种找到它的方法。
var $innerElement;//element inside iframe
var $iframeBody = $innerElement.closest('body');
var $parentIframe = $('iframe').filter(function () {
return $(this).contents().find('body')[0] == $iframeBody[0];
});
