关于dom：在jQuery中检索文档的父iframe


Retrieving a document's parent iframe in jQuery

我有一个包含iframe的页面，其中包含html文档。 我需要从该子文档访问iframe的ID，并且对使用jQuery不太满意。 基本结构在我的页面中是这样的：

1
2
3
4
5
6
7
  <iframe id="ContainingiFrame">
   <html>
     <head></head>
     <body>
     </body>
   </html>
  </iframe>

在我的javascript方法中，我可以使用jQuery选择器访问标记中的所有内容，但无法检索iframe元素以调整其大小。 我已经尝试了一些方法，但是我不能算是不是jQuery DOM导航的专家，尤其是在涉及iframe的情况下(iframe与包含页面位于同一个域中)。我有办法吗？

相关讨论

完全不需要jQuery。要获取父母的身体对象，可以执行以下操作：

1
var parentBody = window.parent.document.body

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

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

或使用jQuery：

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

这是一篇有关使用示例代码从iframe调整iframe大小的文章：http://www.pither.com/articles/2010/11/12/resize-iframe-from-within

并且，有关根据其自身内容调整iframe大小的相关问题/答案：根据内容调整iframe的大小

相关讨论

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

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

或将其添加到选择器之前：

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

如果您没有有关iframe的信息(例如用于查询的标识符)，则要使用窗口的frameElement，如下所示：

1
var iframe_tag_in_parent_window = window.frameElement;

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

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

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

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

例如，如果您在iframe标记中具有唯一的ID，则可以执行以下操作：

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

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

附言如果window.frameElement为null或未定义，则您不在iframe中。

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

P.P.P.S.确保使用window.frameElement而不是frameElement ...某些浏览器已损坏，如果不完全合格，它们将无法始终访问正确的数据(尽管在2016年，此问题可能已解决？)

相关讨论

试试这个：

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

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

或者只是调整iframe的大小：

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

如果您在iframe中具有element的引用，并且需要找到其父iframe，尤其是当您有多个iframe时，这是一种查找它的方法。

1
2
3
4
5
var $innerElement;//element inside iframe
var $iframeBody = $innerElement.closest('body');
var $parentIframe = $('iframe').filter(function () {
    return $(this).contents().find('body')[0] == $iframeBody[0];
});

试试这个：

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