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>
