88

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>
Paparappa
  • 2,099
  • 3
  • 18
  • 35

4 Answers4

144

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');
barclay
  • 4,362
  • 9
  • 48
  • 68
  • 18
    What if the website container and the iframe are on different domains? – michelem Nov 04 '14 at 14:52
  • 2
    @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. – Jon Onstott Sep 27 '16 at 17:38
  • 5
    @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: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage – Pål Jørgensen Oct 03 '17 at 14:08
  • @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? – Vishal Jul 01 '20 at 04:31
  • It is late but example window.postMessage() is here based on reactjs https://dev.to/damcosset/iframes-and-communicating-between-applications-31k5 – Chetan Jain Oct 04 '20 at 11:31
20

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");
Amr
  • 4,809
  • 6
  • 46
  • 60
  • 2
    Just a note, using jQuery is *not* the same as using `getElementById`. Might be confusing for new developers – alistair Aug 28 '19 at 11:58
10

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

   });

});
ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
  • 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. – Paparappa Aug 11 '11 at 15:32
  • 1
    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. – ShankarSangoli Aug 11 '11 at 15:40
  • 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? – Paparappa Aug 11 '11 at 15:55
  • What is the name of the form? Put is as `form[name=nameOfYourform]` in place of `form` – ShankarSangoli Aug 11 '11 at 16:01
  • What are you trying to do in your modified question? – ShankarSangoli Aug 12 '11 at 12:05
7

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.

varfoo
  • 218
  • 1
  • 4
  • Im a jquery novice but should i put something like this in the ifram file? – Paparappa Aug 11 '11 at 14:53
  • $(document).ready(function(){ window.parent.document.getElementById('#target'); $("#target").load("file.php"); }); – Paparappa Aug 11 '11 at 14:54
  • Probably more like: $(document).ready(function() { $(window.parent.document.getElementById("target")).load("file.php")); }); – varfoo Aug 11 '11 at 15:07
  • Im afraid this doesent work. The form gets submitted well but nothing happens to the target div. It remains as it is. Hmm.. – Paparappa Aug 11 '11 at 15:18
  • 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(); }); }) – varfoo Aug 11 '11 at 15:56
  • Check my first post, is this how you meant? – Paparappa Aug 12 '11 at 07:25