父页面和子页面利用window对象的交互处理

时间 2019-12-24

原文原文链接

1、准备工做javascript

新建一个页面：parent.html，代码以下：css

<!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，代码以下：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>

2、父页面操做子页面java

window.open(url,name,style)数据库

利用上面的方法，咱们能够打开一个指定的html页面，第一个参数就是要打开的页面地址；第二个是名字，自定义；第三个就是设置打开页面的样式和外观。网站

咱们知道利用：ui

window.close()url

能够关闭一个页面，可是咱们当前的window指代parent这个页面，咱们要关闭的是打开的页面（child.html），其实在调用window.open()会返回打开的窗口对象，咱们只要定义变量接收就行了，这时候咱们的变量就表明了打开的子窗口spa

即变量 newwin 等于child.html页面的windowcode

正常关闭是window.close(),这时候咱们的变量newwin表明的子窗口对象，只要

newwin.close()就关闭子页面了，和window调用关闭方法同理。

父页面还作了刷新处理，除了利用Location的href属性的设置还能够利用reload方法等。

3、子页面操做父页面

子页面要对父页面作处理，咱们目的很明确，要操做的对象也很明确，就是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就是获取父页面的整个文档，等等等

总结：

其实这么多介绍，咱们不少网站实际上是利用不到的，不过针对一些特殊的操做，上面的才会被使用到

好比：

咱们打开的子页面作了数据库数据的操做，操做后咱们父页面是对数据的显示，因此须要子页面操做时或者关闭时让父页面刷新，好能够看到最新的数据变化。