Access elements of parent window from iframe

JavascriptJqueryAjaxIframe

Javascript Problem Overview


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>

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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

Solution 3 - Javascript

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

   });

});

Solution 4 - Javascript

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPaparappaView Question on Stackoverflow
Solution 1 - JavascriptbarclayView Answer on Stackoverflow
Solution 2 - JavascriptAmrView Answer on Stackoverflow
Solution 3 - JavascriptShankarSangoliView Answer on Stackoverflow
Solution 4 - JavascriptvarfooView Answer on Stackoverflow