how to access iFrame parent page using jquery?

JavascriptJqueryIframe

Javascript Problem Overview


I have an iframe and in order to access parent element I implemented following code:

window.parent.document.getElementById('parentPrice').innerHTML

How to get the same result using jquery?
UPDATE: Or how to access iFrame parent page using jquery?

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

> how to access iFrame parent page using jquery

window.parent.document.

jQuery is a library on top of JavaScript, not a complete replacement for it. You don't have to replace every last JavaScript expression with something involving $.

Solution 3 - Javascript

If you need to find the jQuery instance in the parent document (e.g., to call an utility function provided by a plug-in) use one of these syntaxes:

  • window.parent.$
  • window.parent.jQuery

Example:

window.parent.$.modal.close();

jQuery gets attached to the window object and that's what window.parent is.

Solution 4 - Javascript

You can access elements of parent window from within an iframe by using window.parent like this:

// using jquery    
window.parent.$("#element_id");

Which is the same as:

// pure javascript
window.parent.document.getElementById("element_id");

And if you have more than one nested iframes and you want to access the topmost iframe, then you can use window.top like this:

// using jquery
window.top.$("#element_id");

Which is the same as:

// pure javascript
window.top.document.getElementById("element_id");

Solution 5 - Javascript

in parent window put :

<script>
function ifDoneChildFrame(val)
{
   $('#parentPrice').html(val);
}
</script>

and in iframe src file put :

<script>window.parent.ifDoneChildFrame('Your value here');</script>

Solution 6 - Javascript

yeah it works for me as well.

Note : we need to use window.parent.document

	$("button", window.parent.document).click(function()
	{
		alert("Functionality defined by def");
	});

Solution 7 - Javascript

It's working for me with little twist. In my case I have to populate value from POPUP JS to PARENT WINDOW form.

So I have used $('#ee_id',window.opener.document).val(eeID);

Excellent!!!

Solution 8 - Javascript

Might be a little late to the game here, but I just discovered this fantastic jQuery plugin https://github.com/mkdynamic/jquery-popupwindow. It basically uses an onUnload callback event, so it basically listens out for the closing of the child window, and will perform any necessary stuff at that point. SO there's really no need to write any JS in the child window to pass back to the parent.

Solution 9 - Javascript

There are multiple ways to do these.

I) Get main parent directly.

for exa. i want to replace my child page to iframe then

var link = '<%=Page.ResolveUrl("~/Home/SubscribeReport")%>';
top.location.replace(link);

here top.location gets parent directly.

II) get parent one by one,

var element = $('.iframe:visible', window.parent.document);

here if you have more then one iframe, then specify active or visible one.

you also can do like these for getting further parents,

var masterParent = element.parent().parent().parent()

III) get parent by Identifier.

var myWindow = window.top.$("#Identifier")

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAmr ElgarhyView Question on Stackoverflow
Solution 1 - JavascriptPim JagerView Answer on Stackoverflow
Solution 2 - JavascriptbobinceView Answer on Stackoverflow
Solution 3 - JavascriptÁlvaro GonzálezView Answer on Stackoverflow
Solution 4 - JavascriptAmrView Answer on Stackoverflow
Solution 5 - JavascriptstievenView Answer on Stackoverflow
Solution 6 - JavascriptYogesh GandhiView Answer on Stackoverflow
Solution 7 - JavascriptHitesh PatelView Answer on Stackoverflow
Solution 8 - Javascriptcj5View Answer on Stackoverflow
Solution 9 - JavascriptBharatView Answer on Stackoverflow