js学习之window对象学习(二)

最新推荐文章于 2022-02-20 17:44:42 发布

playboy-jordan

最新推荐文章于 2022-02-20 17:44:42 发布

阅读量199

点赞数

分类专栏： # JavaScript教程文章标签： javascript css vue.js html html5

本文链接：https://blog.csdn.net/weixin_44853669/article/details/106955644

版权

JavaScript教程专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>js的window对象学习2</title>
		<meta charset="UTF-8"/>
		<!--
			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');
					注意:
						关闭子页面的方法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)
		-->
		<!--声明js代码域-->
		<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=no, 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>js的window对象学习2</h3>
	<hr />
	<input type="button" name="" id="" value="测试open" onclick="testOpen()"/>
	<hr />
	<input type="button" name="" id="" value="测试地址栏属性--location--跳转资源" onclick="testLocation()" />
	<input type="button" name="" id="" value="测试地址栏属性--location--重新加载资源" onclick="testLocation2()" />
	<br /><br />
	<input type="button" name="" id="" value="测试历史记录属性--history-前进"  onclick="testHistory();"/>
	<input type="button" name="" id="" value="测试历史记录属性--history-go"  onclick="testHistory2();"/>
	<br /><br />
	<input type="button" name="" id="" value="测试屏幕属性--screen" onclick="testScreen()" />
	<input type="button" name="" id="" value="测试浏览器配置属性--navigator" onclick="testNa()" />
</body>
</html>

son.html

<html>
	<head>
		<title>son页面</title>
		<meta charset="UTF-8"/>
		<!--声明js代码域-->
		<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>秒后页面关闭</b><br />
	<input type="button" name="" id="" value="调用父页面函数" onclick="testFa()"/>
</body>
</html>

在这里插入图片描述

playboy-jordan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js学习之window对象学习(二)

<html> <head> <title>js的window对象学习2</title> <meta charset="UTF-8"/> <!-- js的window对象学习 1、子窗口方法 window.open('子页面的资源(相对路径)','打卡方式','配置'); 示例：window.open('son.html','newwindow','height=400, width=600, top=10
复制链接

扫一扫