Menu
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?
729
To find in the parent of the iFrame use: $('#parentPrice', window. parent. document).
When a page is running inside of an iframe, the parent object is different than the window object. You can still access parent from within an iframe even though you can't access anything useful on it. This code will never cause an error even when crossing origins.
Sending some data from the child iframe to the parent window is also pretty simple. Whenever you embed an iframe, the iframe will have a reference to the parent window. You just need to use the PostMessage API to send data via the window. parent reference of the parent window.
A parent iframe is an internal frame in a web page that holds a secondary web page or script. They are often called iframes, since the "parent" part of the name is from the viewpoint of its content. Anything in an iframe is considered its child, while it is considered the parent of its content.
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?)
127
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
24
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();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
