在 jQuery 中检索文档的父 iframe答案

【问题标题】：Retrieving a document's parent iframe in jQuery在 jQuery 中检索文档的父 iframe
【发布时间】：2012-08-20 07:17:27
【问题描述】：

我有一个带有 iframe 的页面，其中包含一个 html 文档。我需要从该子文档中访问 iframe 的 id，并且我没有运气使用 jQuery。我的页面中的基本结构是这样的：

<div id="ContainingDiv">
  <iframe id="ContainingiFrame">
   <html>
     <head></head>
     <body>
     </body>
   </html>
  </iframe>
</div>

在我的 javascript 方法中，我可以使用 jQuery 选择器获取 <body> 标记中的任何内容，但无法检索 iframe 元素以调整其大小。我尝试了一些东西，但我承认我不是 jQuery DOM 导航方面的专家，尤其是涉及 iframe 的地方（iframe 与包含页面在同一个域中。）有没有办法可以做到这一点？

【问题讨论】：

“iframe 元素”是什么意思，ID 为 ContainingiFrame 的 iframe 本身或 iframe 内的元素。你到底要调整什么大小？
adeneo，我对 ContainingiFrame 本身很感兴趣。我在下面有一些很好的答案，希望我能接受所有这些。

标签： jquery dom iframe selector

【解决方案1】：

试试这个：

调整iframe中的某些元素的大小：

$('#ContainingiFrame', window.parent.document).find('#someDiv').css('height', '200px');

或者只是调整iframe的大小：

$('#ContainingiFrame', window.parent.document).height('640');

【讨论】：

【解决方案2】：

试试这个：

$("#ContainingiFrame").contents().find("#someDiv");

【讨论】：

【解决方案3】：

要从 iframe 访问父文档，您可以向选择器添加一个参数，默认为文档，但没有什么可以阻止您将上下文更改为 window.parent.document，如下所示：

$('#ContainingiFrame', window.parent.document).whatever();

或者在你的选择器之前添加它：

window.parent.$('#ContainingiFrame').whatever();

【讨论】：

【解决方案4】：

根本不需要 jQuery。要获取父母的 body 对象，您可以这样做：

var parentBody = window.parent.document.body

如果它与运行代码的 iframe 位于同一域中，则一旦拥有该域，您就可以在该对象上使用普通的 javascript：

window.parent.document.getElementById("ContainingiFrame").style.height = "400px";

或使用 jQuery：

$("#ContainingiFrame", parentBody).height("400");

这是一篇关于在 iframe 中调整 iframe 大小的文章，其中包含示例代码：http://www.pither.com/articles/2010/11/12/resize-iframe-from-within

还有一个关于根据自身内容调整 iframe 大小的相关问题/答案：Resizing an iframe based on content

【讨论】：

我搜索此信息超过 2 小时；为我的努力工作

【解决方案5】：

如果您没有关于 iframe 的信息（例如要查询的标识符），那么您想使用窗口的frameElement，如下所示：

var iframe_tag_in_parent_window = window.frameElement;

现在您拥有 iframe 标记本身，并且可以直接在 JavaScript 中使用它。

要使用 jQuery 而不是普通的 JavaScript，请使用以下代码：

var iframe_in_jquery = jQuery(window.frameElement, window.parent.document);

我们刚刚讨论了第一部分 (window.frameElement)。第二部分是 jQuery 将在其中找到元素并包装它的上下文。这是我们当前窗口的父文档。

例如，如果您在 iframe 标记中有唯一的 id，您可以这样做：

var iframe_in_jquery = jQuery(window.frameElement, window.parent.document),
    id = iframe_in_jquery.attr("id");

现在id 是您的 JavaScript 代码正在运行的 iframe 的标识符。

附：如果window.frameElement 为空或未定义，那么您不在iframe 中。

P.P.S 请注意，要在父窗口中运行代码，您可能需要使用jQuery() 的父实例；这是使用window.parent.jQuery(...) 完成的。如果您尝试trigger() 一个活动，尤其如此！

P.P.P.S.确保使用window.frameElement 而不仅仅是frameElement...有些浏览器有些损坏，如果不完全合格，它们将无法始终访问正确的数据（尽管在 2016 年这个问题可能会得到解决？）

【讨论】：

是的，frameElement 真的让我们在不知道 id 或其他东西的情况下获取框架容器窗口。不确定这个属性什么时候生效，但是 mdn 说它可以在非常早期的浏览器中使用。

【解决方案6】：

如果您在 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];
});

【讨论】：