Of Stack

jQuery implements mutual calls between parent and child forms of iframe

  • 2021-06-28 11:22:45
  • OfStack

This article provides an example of how jQuery implements the mutual invocation of iframe parent and child forms.Share it for your reference, as follows:

MDIForm 


<html>
  <head>
    <title>usually function</title>
  </head>
  <body>
    <iframe src="http://www.baidu.com" ></iframe>
    <iframe src="myifame.html" id="name_iframe" name="name_iframe"></iframe>
    <button value="buttonvalue" id="testid">buttonvalue</button>
  </body>
<html>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script>
//contentWindow This property is equivalent to getting iframe Inside the Web window object 
$(function(){
  // Parent Form Gets Variables of Child Form 
  alert(document.getElementById("name_iframe").contentWindow.vname);// Method for parent form to get child form 
  document.getElementById("name_iframe").contentWindow.test();// Parent Form Gets the Content of Child Form 
  alert(document.getElementById("name_iframe").contentWindow.document.body.outerHTML);
});
var myname="hb";
function parentFunction(){
  alert("parentFunction");
}
</script>

MDIChild 


<html>
  <head>
    <title>usually function</title>
  </head>
  <body>
    <button onclick="getParentContent()">getParentContent</button>
  </body>
<html>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script>
var vname="v_name";
function test(){
  alert("function test");
}
function getParentContent(){
  // Get the variable of the parent form 
  alert(window.parent.myname);
  // Method to get parent form 
  window.parent.parentFunction();
  // Get the parent form's dom node 
  alert(parent.document.getElementById("testid").value);
}
</script>

More readers interested in jQuery-related content can view this site's topics: jQuery Common Plug-ins and Usage Summary, Ajax Usage Summary in jquery, jQuery Table (table) Operation Skills Summary, jQuery Dragging Special Effects and Skills Summary, jQuery Extended Skills Summary, jQuery Common Classic Special Effects Summary,jQuery Animation and Utility Summary and jquery Selector Usage Summary

I hope that the description in this paper will be helpful to everyone's jQuery program design.

Related articles: