Access elements of parent window from iframe

Question

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

$(;"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 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>

• ShankarSangoli: The target div is in the parent page or iframe?
• Paparappa: its in the parent page, so my question is basicly if you can make for an example a jquery call outside the iframe to the parent.

Answer 1

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'); 

• michelem: What if the website container and the iframe are on different domains?
• Jon Onstott: @Michelem I think you're out of luck; for you to have access to the parent, the iframe needs to have the same protocol and domain of the parent. That's a safeguard to prevent cross domain scripting.
• Pål Jørgensen: @Michelem: The only way to communicate with the parent if the iframe and parent is on different domains, is using window.postMessage(). That's possible only if you have control over both ends, though. Documentation here: developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• Vishal: @michelem is there any example how to access the parent element within iframe? we can do stuff with window.postMessage() but what is we want to access the element and use it in iframe?
• Chetan Jain: It is late but example window.postMessage() is here based on reactjs dev.to/damcosset/…

Answer 2

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");

• alistair: Just a note, using jQuery is not the same as using getElementById. Might be confusing for new developers 👍

Answer 3

Have the 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");
 });
 });
 });
});

• Paparappa: It works to submit the form through ajax, but the target div remains as it is from the beginning. It seems as it doesent work to communicate with parent.php from within the iframe.
• ShankarSangoli: If the iframe is in the same domain then you will not have any issues. Can you try to alert window.parent.$("#target").length in the success handler.
• Paparappa: the iframe is in the same domain. Well i put that code in instead of window.parent.$("#target").load("urlOfThePageToLoad"); but it returned nothing. Where it sais "form" in your code, is it supposed to be the name of the form? Could that be it?
• ShankarSangoli: What is the name of the form? Put is as form[name=nameOfYourform] in place of form
• ShankarSangoli: What are you trying to do in your modified question?

Answer 4

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:

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

Then do whatever you want with that div.

• Paparappa: Im a jquery novice but should i put something like this in the ifram file?
• Paparappa: $(document).ready(function(){ window.parent.document.getElementById('#target'); $("#target").load("file.php"); })
• varfoo: Probably more like: $(document).ready(function() { $(window.parent.document.getElementById("target")).load("file.php")); })
• Paparappa: Im afraid this doesent work. The form gets submitted well but nothing happens to the target div. It remains as it is. Hmm..
• varfoo: Probably need to keep the form from submitting until the javascript that you want to run from the iframe finishes submitting. So it would be something like (sorry if there are mistakes in the code below, writing it in a code block like this is a pain): $(;"form").submit(function(e){ e.preventDefault; window.parent.document.getElementById('#target'); $("#target").load("file.php", function() { $('form').submit(); }); })