CODEWITHSUNDEEP
javascriptjqueryajaxiframe
Paparappa
Paparappa

Reputation: 2189

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

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

Upvotes: 92

Views: 319792

Answers (4)

Amr
Amr

Reputation: 5159

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

Upvotes: 21

barclay
barclay

Reputation: 4562

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

Upvotes: 150

varfoo
varfoo

Reputation: 228

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.

Upvotes: 8

ShankarSangoli
ShankarSangoli

Reputation: 69915

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

   });

});

Upvotes: 10

Related Questions