Home>

Example 1:Child window is a newly opened window

Parent window:

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>parent</title>
  <script type="text/javascript">
    var parentpara="parent";
    function parentfunction () {
      alert (parentpara);
    }
  </script>
</head>
<body>
  <button onclick="parentfunction ()">show variable value</button>
  <button onclick="window.open (" child.html ")">Open new window</button>
</body>
</html>

Child window:

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>child</title>
  <script type="text/javascript">
    function modify () {
      opener.parentpara="child";
    }
  </script>
</head>
<body>
  <button onclick="opener.parentfunction ()">Call method of parent page</button>
  <button onclick="modify ()">Change the value of a variable in the parent page</button>
</body>
</html>

Just add opener in front of variables and functions to access the specified resource.

But when the parent window is closed,Using it again will report an error:"The called object has disconnected from its client."

Example 2:The child page is an iframe of the parent page

Parent page:

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>parent</title>
  <script type="text/javascript">
    function fill () {
      //alert(frame1.window.childpara);//Display the variable value in frame1
      var str=document.getelementbyid ("txt1"). value;//Get the value entered in the text box
      frame1.window.div1.innerhtml=str;//Fill the value into a div of the child page
    }
  </script>
</head>
<body>
  <div>
    Parent page
    <iframe src="child.html" frameborder="0" scrolling="no" width="120px" height="120px"></iframe>
    <br /><br /><br /><br />
    <input type="text" />
    <button onclick="fill ()">Fill the value of the text box into the sub-interface</button>
  </div>
</body>
</html>

Subpage:

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>child</title>
  <script type="text/javascript">
    function fun () {
      parent.fill ();
    }
  </script>
</head>
<body>
  <div>
    <b>Subpage</b><br />
    <a href="#" onclick="fun ()">Same parent page button</a>
    <div>
    </div>
  </div>
</body>
</html>

Little discovery:When refreshing the parent page,The iframe will be refreshed accordingly;When the iframe is refreshed, the parent page is not refreshed.

  • Previous Summary of ways to delete and empty sessions in PHP
  • Next Development of Android using Android-query framework (1)