How to Access Iframe Parent Page Using Jquery

how to access iFrame parent page using jquery?

To find in the parent of the iFrame use:

$('#parentPrice', window.parent.document).html();

The second parameter for the $() wrapper is the context in which to search. This defaults to document.

Retrieving a document's parent iframe in jQuery

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

How to access parent.document elements using JQuery in firefox?

What about:

window.parent.$(elementid).attr(attributeName);

Accessing element in child IFrame from parent page using jquery

Try using load instead of ready.

$('#iframe1').load(function(){
    console.log($('#iframe1').contents().find("#testDiv").html());
});

Can javascript access iframe elements from the parent page?

It should not be able to if the pages are from different domains, the browsers security sandbox should prevent this type of access. It might work when the two pages are from different sub domains of the same domain, but that can and will differ between browsers (and possibly even versions of the same browser).

Accessing the child iframe might work, but the other way around will most certainly not work.

Access elements of parent window from iframe

I think the problem may be that you are not finding your element because of the "#" in your call to get it:

window.parent.document.getElementById('#target'); 

You only need the # if you are using jquery. Here it should be:

window.parent.document.getElementById('target'); 

access div in iframe parent

try this in iframe:

$('#DIVtobehidden', window.parent.document).hide();

Select iframe parent from within iframe

Here's the answer! It's just a little confusing to start with but really easy!

Assuming that same origin policy is not a problem, you can use parent.document to access the elements, and manipulate them.

Demo: Here

Iframe Outer: Here

Iframe Inner: Here

Hope this helps, Spent I fair bit of time figuring this out for you so I'd love the support of upping my answer!

Cheers,
Shannon

---

Related Topics