Retrieving a document's parent iframe in jQuer

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:

<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?

标签： jquery dom iframe selector

6条回答

时光不老，我们不散

2楼-- · 2020-02-09 04:32

Try this:

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

0人赞添加讨论(0) 举报

ゆ、 Hurt°

3楼-- · 2020-02-09 04:37

To access the parent's document from your iframe you can add a parameter to your selectors, default is document but nothing prevents you from changing the context to window.parent.document like this :

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

Or add it before your selector :

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

0人赞添加讨论(0) 举报

We Are One

4楼-- · 2020-02-09 04:37

If you do not have information about the iframe (such as an identifier to query with) then you want to use the frameElement of the window as follow:

var iframe_tag_in_parent_window = window.frameElement;

Now you have the iframe tag itself and can work with it directly in JavaScript.

To use jQuery instead of plain JavaScript, you use the following:

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.

For example, if you have a unique id in the iframe tag you could do:

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

Now id is the identifier if the iframe your JavaScript code is running into.

P.S. if window.frameElement is null or undefined, then you are not in an 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!

P.P.P.S. make sure to use window.frameElement and 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?)

0人赞添加讨论(0) 举报

我命由我不由天

5楼-- · 2020-02-09 04:40

Try this:

Resize some element inside iframe:

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

Or just resize the iframe:

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

0人赞添加讨论(0) 举报

欢心

6楼-- · 2020-02-09 04:41

No need for jQuery at all. To get the body object of your parent, you can do this:

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:

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

or with 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

And, a related question/answer on resizing an iframe based on it's own content: Resizing an iframe based on content

0人赞添加讨论(0) 举报

家丑人穷心不美

7楼-- · 2020-02-09 04:43

If you have a reference of element within iframe and need to find its parent iframe especially when you have more than one iframes, here is a way of finding it.

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

0人赞添加讨论(0) 举报

Retrieving a document's parent iframe in jQuer

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间