在jQuery中检索文档的父iframe

我有一个带有iframe的页面,其中包含一个html文档。 我需要从那个子文档中访问iframe的id,并且没有运气使用jQuery。 基本结构是在我的页面内:

在我的javascript方法中,我可以使用jQuery选择器获取标签中的任何内容,但无法检索iframe元素以调整其大小。 我已经尝试过一些东西,但我确实不是jQuery DOM导航方面的专家,特别是在涉及iframe的情况下(iframe与包含页面位于同一个域中。)有没有办法可以做到这一点?

根本不需要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大小

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

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

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

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

如果您没有关于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的标识符。


PS如果window.frameElement为null或未定义,那么您不在iframe

PPS注意到要在父窗口中运行代码,您可能需要使用jQuery()的父实例; 这是使用window.parent.jQuery(...) 。 如果您尝试trigger()事件,则尤其如此!

PPPS确保使用window.frameElement而不仅仅是frameElement …某些浏览器有些破坏,如果不完全合格,它们将无法始终能够访问正确的数据(尽管在2016年可能会解决该问题?)

试试这个:

调整iframe一些元素:

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

或者只是调整iframe大小:

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

试试这个:

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

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