Using iframe to Interact Between Parent and Child Page in Jquery Syntax

barry fat

5.00/5 (1 vote)

22 Nov 2014CPOL1 min read

50.8K

Using iframe to Interact Between Parent and Child Page in Jquery Syntax

Introduction

Nowadays, iframe element is not very popular but I think many web developers still use it for their web layout. As we know, iframe is very useful for web developers to implement their website especially in business web application. In previous projects, I often used iframe as well. So today, I wrote a sample to demonstrate how to use jquery in iframe element.

My sample includes two pages, which are parent and child page. The parent page contain an iframe element and several buttons to trigger my defined function to interact with the child page.

The functions are as follows:

setText - Find out textbox 'child_text_input' in child page to set it the string 'called by parent frame!'.
getText - Obtain the text value from 'child_text_input' in child page.
(* The code provides five methods to find out textbox 'child_text_input' , you can read setText and getText function for reference and uncomment choose one to use.)
redirectURL - Redirect the iframe URL address.
callChild - Call the function 'showmsg' in child page so that it displays the popup message.

Parent.html

JavaScript

<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.1.js"></script>
</head>
<body>

<iframe id="childframe" height="300" 
width="300" src="child.htm" frameborder="1"></iframe>

<script type="text/javascript">

     $(document).ready(function() {   

      setText =function(){   // Set value into child page's textox.

         $('#childframe').contents().find('#child_text_input').val('called by parent frame!');
         //$('#childframe')[0].contentWindow.$('#child_text_input').val('called by parent frame!');
         //$(frames["childframe"].document.body).find('#child_text_input').val('called by parent frame!');
         //$(frames["childframe"].document.body.querySelector('#child_text_input')).val('called by parent frame!');
         //$(frames["childframe"].document.body.querySelectorAll('#child_text_input')[0]).val('called by parent frame!');
         //$(frames["childframe"].document.getElementById('child_text_input')).val('called by parent frame!');
      }

      getText =function(){    // Retrieve the textbox value from child page.

         alert($('#childframe').contents().find('#child_text_input').val());    
         //alert($('#childframe')[0].contentWindow.$('#child_text_input').val());
         //alert($(frames["childframe"].document.body).find('#child_text_input').val());
         //alert($(frames["childframe"].document.body.querySelector('#child_text_input')).val());
         //alert($(frames["childframe"].document.body.querySelectorAll('#child_text_input')[0]).val());
         //alert($(frames["childframe"].document.getElementById('child_text_input')).val());
      }

      redirectURL = function(){     // Redirect the iframe page.
        
         $('#childframe').attr('src','http://jquery.com/');  
      }

      callChild = function(){    // call the function name 'showmsg' in child web page.
  
         $('#childframe')[0].contentWindow.showmsg();
      }

      replymsg = function(){
        
         alert('This function called by child page.');
      }     
    });

</script>
<br />
<input type="button" onclick="setText()" 
value="Set Text into child textfield" />
<input type="button" onclick="getText()" 
value="Get Text into child textfield" />
<input type="button" onclick="callChild()" 
value="Call child page function" />
<input type="button" onclick="redirectURL()" 
id='urlButton' value="Set child url" />
</body>
</html>

The following demo code is child.html. It includes two buttons which will use onclick event to call my defined functions to interact with parent page.

The function 'callParent' is used to call the function 'replymsg' in parent page in order to display a popup message.

Another function 'setButtonText' is used to find out a button, whose id is 'urlButton' in parent page. And then update the button value. (* The function in my code also has other two methods for reference. you can uncomment them to use as well.

JavaScript

<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.1.js"></script>
</head>
<body>

<input type="text" name="child_text_input" 
id="child_text_input" >
<input type="button" onclick="setButtonText()" 
value="Set Text into parent button text" />
<input type="button" onclick="callParent()" 
value="Call parent page function" />

<script type="text/javascript">

    $(document).ready(function() {

      showmsg = function(){
        
         alert('This function called by parent page.');
      }

      callParent = function(){  // call a function in parent page.
        
         parent.replymsg();
      }

      setButtonText = function(){   //update the button value in parent page.
     
         $(parent.document).find('#urlButton').val('value changed by child page');
         //$(parent.document.querySelector('#urlButton')).val('value changed by child page');
         //parent.$("#urlButton").val('value changed by child page');
      }

    });

</script>

</body>
</html>

I tested the above code in Internet Explorer 11.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)