Access parent window elements from iframe

Question

I have a page we can call parent.php . On this page, I have an iframe with a form to submit, and besides that I have a div with the identifier "target". Is it possible to submit the form in an iframe even if the target div is successfully updated. Say, load a new page or something?

Change: the target div is on the parent page, so my question is mainly if you can make a jQuery call for example outside the iframe for the parent. And what will it look like?

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

 $(;"form[name=my_form]").submit(function(e){ e.preventDefault; window.parent.document.getElementById('#target'); $("#target").load("mypage.php", function() { $('form[name=my_form]').submit(); }); }) 

I don’t know if the script is active, because the form is submitted successfully, but nothing happens with the goal.

Edit 3:

Now I am trying to call the parent page by the link inside the iframe. And there is no success either

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

Answer 1

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

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

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

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

Answer 2

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

 $(function(){ $("form").submit(e){ e.preventDefault(); //Use ajax to submit the form $.ajax({ url: this.action, data: $(this).serialize(), success: function(){ window.parent.$("#target").load("urlOfThePageToLoad"); }); }); }); }); 

Answer 3

You can access the elements of the parent window from the iframe using window.parent as follows:

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

Which is the same as:

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

And if you have several nested iframes and want to access the top iframes, then you can use window.top as follows:

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

Which is the same as:

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

Answer 4

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

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

Then do whatever you want with this div.