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

最新推荐文章于 2021-06-03 14:25:59 发布

weixin_33976072

最新推荐文章于 2021-06-03 14:25:59 发布

阅读量276

点赞数 1

文章标签： xhtml javascript 数据库 ViewUI

原文链接：https://my.oschina.net/tbd/blog/549929

版权

为什么80%的码农都做不了架构师？>>>

一、准备工作

新建一个页面：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