JavaScript——window对象
本节目标：
掌握window对象的操作方法
window对象
在使用JS打开窗口或关闭窗口时，或者做一些比较特殊的效果时，需要使用window对象。
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function fun(thisurl){
window.open(thisurl);
}
</script>
</head>
<body onload="fun('test.html')">
</body>
</html>
如上，在加载一个页面时，打开另一个窗口。
打开新窗口操作：
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function fun(thisurl){
window.open(thisurl,"页面标题","width=470,heigth=150,scrollbars=yes,resizeable=no");
}
</script>
</head>
<body>
<form method="post" action="" name="myForm">
网址：<select name="url" onchange="fun(this.value)">
<option value="test1.html">test1</option>
<option value="test2.html">test2</option>
</select>
</form>
</body>
</html>
提示确认操作：
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function fun(){
if(window.confirm("确定删除？")){
alert("删除成功");
}else{
alert("取消");
}
}
</script>
</head>
<body>
<a href="#" onclick="fun()">删除邮件</a>
</body>
</html>
页面重定向操作：
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function fun(thisurl){
window.location=thisurl;
}
</script>
</head>
<body>
<form method="post" action="" name="myForm">
<select onchange="fun(this.value)">
<option value="#">===请选择===</option>
<option value="test1.html">test1.html</option>
<option value="test2.html">test2.html</option>
</select>
</form>
</body>
</html>
在window对象之间也存在父子关系，通过一个窗口打开另一个窗口，那么原本的窗口被称为父窗口，被打开的窗口称为子窗口。
父窗口：
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function fun(thisurl){
window.open(thisurl,"页面标题","width=470,heigth=150,scrollbars=yes,resizeable=no");
}
</script>
</head>
<body>
<form method="post" action="" name="parentForm">
<input type="button" value="打开" onClick="fun('test1.html')"><br>
</form>
</body>
</html>
子窗口test1.html：
<html lang="en">
<head><meta charset="UTF-8">
<script type="text/javascript">
function closewin(){
window.close();
}
window.opener.reload();//刷新页面
</script>
</head>
<body>
<a href="" onclick="closewin()">关闭窗口</a>
</body>
</html>
从子窗口中接收数据到父窗口中：
父窗口：
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function fun(thisurl){
window.open(thisurl,"页面标题","width=470,heigth=150,scrollbars=yes,resizeable=no");
}
</script>
</head>
<body>
<form method="post" action="" name="parentForm">
<input type="button" value="打开" onClick="fun('test1.html')"><br>
选择的结果是：<input type="text" name="result">
</form>
</body>
</html>
子窗口：
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function returnVal(){
var city = document.myForm.city.value;//取出当前选择的信息
var doc = window.opener.document;//取得父窗口文档
doc.parentForm.result.value = city;//设置新内容
window.close();
}
</script>
</head>
<body>
<form method="post" action="" name="myForm">
选择：<select name="city">
<option value="#">===请选择===</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
</select>
<input type="button" value="返回" onclick="returnVal()">
</form>
</body>
</html>