您的位置：首页 > Web前端 > JavaScript

JavaScript实现父子两个窗口之间互相通信

2012-04-22 19:04 633 查看

JavaScript里面的Dom编程里面的window对象有很多的方法能实现很多特殊的效果，下面我们来列举一些方法，然

后做出一个小案例，就是使用Window对象的opener方法实现父子两方的窗口的对话!

首先是父窗口的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test4.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript">
   		function test(){//moveto是按照当前屏幕定位窗口，moveby是根据当前窗口左上角位置再次定位
   			window.moveTo(100, 100);
   		}
   		
   		function test2(){//重新改变大小
   			window.resizeTo(400, 500);
   		}
   		
   		function test3(){//在原来窗口大小的基础上增加一定的程度和宽度
   			window.resizeBy(100, 200);
   		}
   		
   		function test4(){//_black是打开新的窗口，不替换原来的窗口
   		//newWin其实是打开的新窗口的句柄
   			var newWin = window.open("test5.html", "_blank");
   			newWin.document.getElementById("info").innerText="哈哈";
   		}
   </script>
  </head>
  
  <body>
    This is my HTML page. <br>
    <input type="button" onclick="test();" value="移动"/><br/>
     <input type="button" onclick="test2();" value="改变大小"/><br/>
     <input type="button" onclick="test3();" value="增加大小"/><br/>
      <input type="button" onclick="test4();" value="打开新窗口"/><br/>
      <span id="myspan"></span>
  </body>
</html>

然后是子窗口的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test5.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    	function notify(){//获取当前输入内容信息，传递给父窗口
    		var val = document.getElementById("info").value;
    		window.opener.document.getElementById("myspan").innerText=val;
    	}
    </script>
  </head>
  
  <body>
    我是新窗口
    <input type="text" id="info"/><br/>
    <input type="button" value="通知给父窗口" onclick="notify();"/>
  </body>
</html>

这样两个窗口之间就能进行互相的通信了，其实关键代码就是那一句

function notify(){//获取当前输入内容信息，传递给父窗口
    		var val = document.getElementById("info").value;
    		window.opener.document.getElementById("myspan").innerText=val;
    	}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航