js-windows对象学习2_toolbar=yes, menubar=yes,scrollbars=yes,resizable=-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44805105/article/details/110709962

本文介绍了JavaScript中Window对象的基础知识，包括子窗口的打开与关闭、父子页面间的交互、地址栏和历史记录的操作方法，以及如何获取屏幕分辨率等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js的window对象学习
1、子窗口方法
window.open(‘子页面的资源(相对路径)’,‘打卡方式’,‘配置’);
示例：window.open(‘son.html’,‘newwindow’,‘height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes’);
toolbar：工具栏，menubar：菜单栏，scrollbars：滚动条，resizable-可调整大小，location：位置， status：地位
注意:
关闭子页面的方法window.close(),但是此方法只能关闭open方法打开的子页面。
2、子页面调用父页面的函数
window.opener.父页面的函数
js的window对象的常用属性
地址栏属性:location
window.location.href=“新的资源路径（相对路径/URL）”
window.location.reload()重新加载页面资源
历史记录属性
window.history.forward() 页面资源前进，历史记录的前进。
window.history.back() 页面资源后退，历史记录后退
window.history.go(index) 跳转到指定的历史记录资源
注意window.history.go(0)相当于刷新。
屏幕属性
window.srceen.width;//获取屏幕的宽度分辨率
window.screen.height;//获取屏幕的高度分辨率
浏览器配置属性

主体面板属性(document)

父页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window对象学习</title>
		<script type="text/javascript">
			//1.子页面方法
			function testOpen(){
				window.open('son.html','newwindow','height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes');	
			}
			//2.子页面调用父页面的函数
			function testFather(){
				alert("父页面")
			}
			/*----------------------------------------------------------------------------------*/
			//1.地址栏属性学习-location
			function testLocation(){
				window.location.href="http://www.baidu.com";
			}
			function testLocation2(){
				window.location.reload();
			}
			
			//2历史记录属性
			function testHistory(){
				window.history.forward();
			}
			function testHistory2(){
				window.history.go(0);
			}
			
			//3.屏幕属性学习
			function testScreen(){
				var x=window.screen.width;
				var y=window.screen.height;
				alert(x+":"+y);
			}
			//4.浏览器配置属性
			function testNa(){
				alert(window.navigator.userAgent);
			}
		</script>
	</head>
	<body>
	<h3>window对象学习</h3>
	<hr />
	<input type="button" value="测试open" onclick="testOpen();" />
	<hr />
	<input type="button" value="测试地址栏属性-location-跳转资源" onclick="testLocation()" />
	<input type="button" value="测试地址栏属性-location-重新加载资源（刷新）" onclick="testLocation2()" />
	<br />
	<br />
	<hr />
	<input type="button" value="测试历史记录属性--history-前进" onclick="testHistory();" />
	<input type="button" value="测试历史记录属性--history-go-跳转" onclick="testHistory2();" />
	<br />
	<br />
	<hr />
	<input type="button" value="测试屏幕属性--screen" onclick="testScreen();" />
	<input type="button" value="测试浏览器配置属性--navigator" onclick="testNa();" />
	</body>
</html>

子页面

<html>
	<head>
		<title>son页面</title>
		<meta charset="utf-8" />
		
		<script type="text/javascript">
			//倒计时功能
			function testTime(){
				window.setInterval(function(){
					var span=document.getElementById("timeSpan");
					span.innerHTML=span.innerHTML-1;
					
					//关闭子页面
					if(span.innerHTML==0){
						window.close();
					}
				},1000)
			}
			//调用父页面
			function testFa(){
				window.opener.testFather();
			}
			
		</script>
	</head>
	<body onload="testTime()">
		<h3>son页面</h3>
		<hr />
		<b>欢迎来到子页面，<span id="timeSpan"style="color: red;font-size: 40px;">5</span> s 后自动关闭此页面</b>
		<input type="button" name="" id="" value="调用父页面函数" onclick="testFa()"/>
	</body>
</html>