一、准备工作
新建一个页面: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就是获取父页面的整个文档,等等等
总结:
其实这么多介绍,我们很多网站其实是利用不到的,不过针对一些特殊的操作,上面的才会被使用到
比如:
我们打开的子页面做了数据库数据的操作,操作后我们父页面是对数据的显示,所以需要子页面操作时或者关闭时让父页面刷新,好可以看到最新的数据变化。