Question

我有一个包含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与包含页面在同一个域中。）有没有办法可以做到这一点？

Answer 1

根本不需要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内容调整iframe大小的相关问题/答案：Resizing an iframe based on content

Answer 2

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

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

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

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

Answer 3

如果您没有关于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");

如果您的JavaScript代码遇到id，则iframe是标识符。

P.S。如果window.frameElement为null或未定义，则表示您不在iframe。

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

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

Answer 4

试试这个：

调整iframe内部的一些元素：

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

或者只调整iframe：

的大小

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

Answer 5

试试这个：

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

Answer 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];
});

在jQuery中检索文档的父iframe

6 个答案: