Retrieving a document's parent iframe in jQuery

Question

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?

What do you mean by the "iframe element", the iframe itself with an ID of `ContainingiFrame` or an element inside the iframe. What exactly is it you're trying to resize ? — adeneo, Aug 24 '12 at 17:50
adeneo, I'm interested in the ContainingiFrame itself. I've had some excellent answers below and wish I could accept all of them. — larryq, Aug 24 '12 at 20:53

score 24 · Accepted Answer · edited May 23 '17 at 12:10

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

I'm searching this information for more than 2 hours; works for my efforts — MiBol, May 13 '17 at 22:46

score 11 · Answer 2 · answered Aug 24 '12 at 17:51

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();

Alexis Wilke · Answer 3 · 2016-04-06T08:43:40.627

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

Ya, frameElement really lets us get the frame container window without knowing id or something. Not sure when this property got valid, but mdn says it can be used in very early browsers. — Eric, Feb 08 '18 at 08:23

Oscar Jara · Answer 4 · 2012-08-24T17:55:31.390

1

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');

edited Aug 24 '12 at 17:55

answered Aug 24 '12 at 17:47

Oscar Jara

13,479
10
58
90

score 0 · Answer 5 · answered Aug 24 '12 at 17:49

0

Try this:

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

answered Aug 24 '12 at 17:49

Shankar Cabus

7,824
6
29
43

score 0 · Answer 6 · answered Jun 06 '18 at 06:38

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

Retrieving a document's parent iframe in jQuery

6 Answers6

Linked