一、准备工作
新建一个页面:parent.html,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>p</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<input type="button" id="open" value="打开子窗口" />
<input type="button" id="close" value="刷新当前并且关闭打开的子窗口" />
</body>
<script type="text/javascript">
window.onload=function(){
var cc=document.getElementById("open");
var newwin;
cc.onclick=function(){
newwin=window.open("child.html","child",'height=500, width=500, top=200,left=200, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
};
var ss=document.getElementById("close");
ss.onclick=function(){
window.location.href = window.location.href;
newwin.close();
};
function call(){
alert(1);
};
window.call=call;
};
</script>
</html>
新建一个页面:child.html,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>c</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<input type="button" id="close" value="关闭当前页面" />
<a href="javascript:void(0)" onclick="refreshParent()">刷新父窗口并关闭当前窗口</a>
<input type="button" id="call" value="调用父窗口方法" />
</body>
<script type="text/javascript">
var cc=document.getElementById("close");
cc.onclick=function(){
window.close();
};
function refreshParent() {
window.opener.location.href = window.opener.location.href;
if (window.opener.progressWindow){
window.opener.progressWindow.close();
}
window.close();
};
var pp=document.getElementById("call");
pp.onclick=function(){
window.opener.call();
};
</script>
</html>
二、父页面操作子页面
window.open(url,name,style)
利用上面的方法,我们可以打开一个指定的html页面,第一个参数就是要打开的页面地址;第二个是名字,自定义;第三个就是设置打开页面的样式和外观。
我们知道利用:
window.close()
可以关闭一个页面,但是我们当前的window指代parent这个页面,我们要关闭的是打开的页面(child.html),其实在调用window.open()会返回打开的窗口对象,我们只要定义变量接收就好了,这时候我们的变量就代表了打开的子窗口
即变量 newwin 等于child.html页面的window
正常关闭是window.close(),这时候我们的变量newwin代表的子窗口对象,只要
newwin.close()就关闭子页面了,和window调用关闭方法同理。
父页面还做了刷新处理,除了利用Location的href属性的设置还可以利用reload方法等。
三、子页面操作父页面
子页面要对父页面做处理,我们目的很明确,要操作的对象也很明确,就是parent.html的window
我们如何获取parent页面的window,我们利用的就是
window.opener
window这里代表的是child页面,调用opener属性就会获取到parent页面的window对象
window对象做为全局对象,就是一个页面的根,只要能获取到页面的window我们就如同握住了页面的小命,想怎么做就可以怎么做。
此时我们深深铭记 window.opener 就是父页面
我们此时调用 window.opener.close()就是关闭父页面,
window.opener.location就是获取父页面的地址对象
window.opener.document就是获取父页面的整个文档,等等等
总结:
其实这么多介绍,我们很多网站其实是利用不到的,不过针对一些特殊的操作,上面的才会被使用到
比如:
我们打开的子页面做了数据库数据的操作,操作后我们父页面是对数据的显示,所以需要子页面操作时或者关闭时让父页面刷新,好可以看到最新的数据变化。