返回首页 常用 JavaScript 网页特效

关闭弹出的窗口时,刷新父窗口

实例说明

关闭弹出的窗口时,同时刷新父窗口,一般用来使父窗口获取最新的数据。

技术要点

本实例主要应用 window.open()语句打开新窗口,并在新窗口中应用 opener 属性,该属性返回一个引用,用于指定打开本窗口的窗口对象。

语法:

  • window.opener
  • window.opener.方法
  • window.opener.属性

功能:返回的是一个窗口对象。opener 属性与打开该窗口的父窗口相联系,当访问子窗口中 opener 属性时,返回的是父窗口,通过该属性,可以使用父窗口对象中的方法和属性。

reload()方法是用来刷新指定窗口的。

实现过程

1.要弹出的窗口,并且实现关闭刷新父窗口的页面 new.html

<html>  
<head>  
<meta charset="utf-8" />  
<title>弹出的窗口</title>  
<style type="text/css">  
body{  
    background-image:url(new.jpg);  
    background-repeat:no-repeat;  
    }  
</style>  
<script>  
function pp()  
{  
    alert(window.opener);  
    window.opener.location.reload();  
    window.close();  
}  
</script>  
</head>  
<body>  
    <input type = "button" value = "关闭" onClick="pp();"/>  
</body>  
</html>  

2.主窗口 index.html

<html>  
    <head>  
    <meta charset="utf-8" />  
        <script type="text/jscript" language="javascript">  
            window.open("new.html","new","height=280,width=800,top=10,left=20,resizable=no, location=no",false);  
        </script>  
        <style type="text/css">  
            p{  
                font-size:24px;  
                color:#F00;  
            }  
        </style>  
    </head>  
    <body>  
        <p>网站首页</p>  
    </body>  
</html>