Access elements of parent window from iframe

I have a page we can call parent.php. In this page I have an iframe with a submit form and outside of that I have a div with the id "target". Is it possible to submit the form in the iframe and when success refresh the target div. Say load a new page into it or something?

Edit: The target div is in the parent page, so my question is basically if you can make for an example a jQuery call outside the iframe to the parent. And how that would look?

Edit 2: So this is how my jquery code looks like now. It is in the of the iframe page. the div #target is in the parent.php

 $("#target").load("mypage.php", function() { 

I don't know if the script is active cause the form submits successfully but nothing happens to target.

Edit 3:

Now I'm trying to call the parent page from a link within the iframe. And no success there either:

<a href="javascript:window.parent.getElementById('#target').load('mypage.php');">Link</a>



Have the below js inside the iframe and use ajax to submit the form.



       //Use ajax to submit the form
          url: this.action,
          data: $(this).serialize(),
          success: function(){



I think you can just use window.parent from the iframe. window.parent returns the window object of the parent page, so you could do something like:


Then do whatever you want with that div.


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


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


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

// using jquery    

Which is the same as:

// pure javascript

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

// using jquery$("#element_id");

Which is the same as:

// pure javascript"element_id");


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.