BOM-window对象-组团学

一、open()与close()

yellowWindow.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>黄色小页面</title>
</head>
<body style="background-color: yellow">
</body>
</html>

open(url,target,“特性的字符串”)方法

作用：打开新窗口

参数：
close()方法

作用：关闭窗口

注意：火狐浏览器需要修改设置

浏览器输入：about:config

截屏2020022116.10.25.png
搜索框输入：allow_scr

截屏2020022116.10.45.png

将false值修改为true

截屏2020022116.10.55.png

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>window中常用的方法</title>
</head>
<body>
	<button onclick="openNewWindow()">打开新窗口</button>
	<button onclick="closeWindow()">关闭窗口</button>

	<script type="text/javascript">
		function openNewWindow() {
			window.open("yellowWindow.html", "_blank", "width=200px, height=400px, top=0px, left=0px");
		}

		function closeWindow() {
			window.close();
		}
	</script>
</body>
</html>

二、加载与卸载事件

load事件

作用：当页面加载完成的时候会触发该事件
onunload事件

作用：当页面完全卸载再触发，只有IE支持

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>window中常用的事件-onload加载事件和onunload卸载事件</title>
</head>
<body>
	<button onclick="func()">跳转</button>
	<script type="text/javascript">
		window.onunload = function() {
			alert("确定关闭");
		};
		function func() {
			window.location.href = "red.html";
		}
		window.onload = function() {
			alert("我在界面加载完后才显示");
		};

		alert("页面加载中");
	</script>
</body>
</html>

三、滚动事件

触发条件：当窗口发生滚动会触发该事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>window中常用的事件-onscroll滚动事件</title>
</head>
<body style="height:3000px">
	<h1>我是顶部</h1>
	<button onclick="goOn()" style="position: fixed;right: 50px;bottom: 50px">返回顶部</button>

	<script type="text/javascript">
		//当窗口发生滚动会触发该事件
		window.onscroll = function() {
			console.log("滚动");

			//打印滚动高度
			var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
			console.log(scrollTop);
		};

		//返回顶部
		function goOn() {
			document.documentElement.scrollTop = 0;
			document.body.scrollTop = 0;
		}
	</script>
</body>
</html>

四、窗口变化事件

触发条件：当浏览器发生缩放的时候就会反复触发resize事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>window中常用的事件-onresize窗口变化事件</title>
</head>
<body>
	<script type="text/javascript">
		//当浏览器发生缩放的时候就会反复触发resize事件		
		window.onresize = function() {
			var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;

			var h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;

			console.log(document.documentElement.clientWidth, document.body.clientWidth, window.innerWidth, w);

			console.log(document.documentElement.clientHeight, document.body.clientHeight, window.innerHeight, h);
		};
	</script>
</body>
</html>