14 window对象

js的window对象的方法

1.子窗口方法

应用场景：例如弹出一个子页面要求用户输入一些信息提交
window.open("子页面的资源（相对路径）","打开方式","配置")
打开方式：
- 　　newwindow：新窗口
配置：
- 　　太多了直接给例子吧：
- 　　window.open('son.html','newwindow','heigth=400px,width=600,top=100px,left=320px,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
- 　　window.close();关闭子页面，注意这是配套使用的，只有当父页面使用window.open()打开的子页面，才能使用这个方法关闭。

2.子页面调用父页面的函数

应用场景：子页面执行完毕后调用父页面的函数刷新父页面
window.opener.父页面的函数好像测试了下：window.close()才能关呢。。。所以此待考证

js的window对象的属性

1.地址栏属性(地址栏就是浏览器中输地址的地方):location

可以通过location对象实现对当前页面的刷新：window.location.reload();
跳转至指定页面：window.location.href="xxx.com";

2.历史记录属性:history

应用场景：浏览器的前进后退
window.history.forward();前进
window.history.back();后退
window.history.go(index);跳转指定的历史记录,0表示当前页面，所以go(0)相当于刷新

3.屏幕属性：screen

window.screen.width;
window.screen.height;

4.浏览器配置属性

window.navigator.userAgent;

5.主页面板属性（document) 这个下节单独讲

代码

代码1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <script type="text/javascript">
		 	function onclickTest1(){
				javascript:window.open("0 子页面.html","newwindow","heigth=100,width=100,top=10px,left=3px,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");
			}
			function onclickTest2(){
				window.close();
			}
			function test(){
				alert("我是父页面的函数");
			}
			function dolocation(){
				window.location.href="http://www.baidu.com";
			}
			function dofoward(){
				window.history.forward();
			}
			function doback(){
				window.history.back();
			}
			function getwidth(){
				alert(window.screen.width)
			}
			function getInfo(){
				alert(window.navigator.userAgent)
			}
		 </script>
		 <button type="button" onclick="onclickTest1()">打开一个子窗口</button>
		 <button type="button" onclick="onclickTest2()">关闭一个子窗口</button>
		 <br>location 属性:
		 <button type="button" onclick="dolocation()">跳转百度</button>
		 <br>history属性：
		 <button type="button" onclick="dofoward()">前进</button>
		 <button type="button" onclick="doback()">后退</button>
		 <br>screen属性：
		 <button type="button" onclick="getwidth()">获取屏幕宽</button>
		 <br>navigator.userAgent
		 <button type="button" onclick="getInfo()">浏览器配置属性</button>
	</body>
</html>

代码2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function shutup(){
				window.close();
			}
		</script>
		<h1>hello!我是子页面！</h1>
		<hr>
		<button type="button" onclick="shutup()">调用父页面的关闭子窗口的函数</button>
	</body>
</html>