[ACCEPTED]-Retrieving a document's parent iframe in jQuery-selector

Accepted answer
Score: 24

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

var parentBody = window.parent.document.body

If 8 it's on the same domain as your iframe that 7 you are running the code from, once you 6 have that, you can use normal javascript 5 on that object:

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

or with jQuery:

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

Here's an 4 article on resizing an iframe from within 3 the iframe with sample code: http://www.pither.com/articles/2010/11/12/resize-iframe-from-within

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

Score: 11

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

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

Or add it before your selector 1 :

Score: 7

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

var iframe_tag_in_parent_window = window.frameElement;

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

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

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

We just talked about the first 17 part (window.frameElement). The second part is the context 16 in which jQuery will find the element and 15 wrap it. This is the parent document of 14 our current window.

For example, if you have 13 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 12 id is the identifier if the iframe your JavaScript 11 code is running into.

P.S. if window.frameElement is null or 10 undefined, then you are not in an iframe.

P.P.S 9 note that to run code in the parent window, you 8 may need to use the parent instance of jQuery(); this 7 is done using window.parent.jQuery(...). This is particularly true 6 if you try to trigger() an event!

P.P.P.S. make sure 5 to use window.frameElement and not just frameElement... some browsers are 4 somewhat broken and they will not always 3 be able to access the correct data if not 2 fully qualified (although in 2016 that problem 1 may be resolved?)

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


Score: 0

Try this:



Score: 0

If you have a reference of element within 3 iframe and need to find its parent iframe especially 2 when you have more than one iframes, here 1 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];

More Related questions