欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

javascript基础:创建窗口、父窗口与子窗口

程序员文章站 2022-03-02 12:06:42
...

通过window对象的open方法可以窗口子窗口,通过close方法可以关闭子窗口,但是只有在不指定新窗口连接的情况下,才有效。

下面的代码是在chrome中运行的。

父窗口代码:

 

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <meta charset="gb2312">

  <script language="javascript">

	function openW()
	{
	    //打开新的窗口,参数都是空字符串
		//如果指定具体的网页或连接,js代码没办法对这种方法创建的新窗口进行控制
		//myWindow变量不能定义,直接
		var strFeatures = "left=0,screenX=0,top=0,screenY=0";
		if(window.screen)
		{
			var x = screen.availHeight - 30;
			var y = screen.availWidth -10;

			//更改窗口属性
			strFeatures += ",height=" + x;
			strFeatures += ",innerHeight=" +x;
			strFeatures += ",width=" + y;
			strFeatures += ",innerWidth=" + y;   
			strFeatures += ",titlebar,toolbar";   //这两个属性无效

		}

		myWindow = window.open('','',strFeatures);	

		myWindow.focus();
	}

	function closeW()
	{
        if(myWindow && myWindow.open && !myWindow.closed)
			myWindow.close();
	}

	function changeURL(x)
	{
        if(myWindow && myWindow.open && !myWindow.closed)
		{
			myWindow.location.href = x;   //注意变量的大小写
			document.form1.text1.value = "父窗口"
		}
	}

	function changeP()
	{
		//opener这个属性只有在父窗口才有效,在子窗口没有效果
		if(window.opener && !window.opener.closed)
			myWindow.opener.document.write('这是父窗口');
	}

  </script>
 </HEAD>

 <BODY>
	<form name="form1">
		<input type="button"  value="打开窗口" οnclick="openW()">
		<input type="button"  value="关闭窗口" οnclick="closeW()">
		<input type="button"  value="显示新的url" οnclick="changeURL('js-window被打开的窗口.html')">
		<input type="button"  value="改变父窗口" οnclick="changeP();">

		<hr>
		<input type="text" name="text1" value="">
	</form>
  
 </BODY>
</HTML>


子窗口代码:

 

 

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <meta charset="gb2312">
 </HEAD>
	<script language="javascript">

		function changeP()
		{
			//这里的window.opener是对象,但是试了一下发现并不能修改父级窗口的内容
			if(window.opener && !window.opener.closed)
			{
				alert(typeof(window.opener));
				//window.opener.document.form1.text1.value = "xx";

				//这里的父窗口还是这个窗口,并不是打开这个窗口的窗口
				//var parentP = window.parent;
				//parentP.location.href = "http://www.baidu.com";
			}
		}
	</script>

 <BODY>
	<input type="button" value="修改父窗口" οnclick="changeP()">
	<input type="button" value="关闭窗口" οnclick="window.close();">  
 </BODY>
</HTML>