首页 > Web开发 > 详细

JS中关闭新页面时刷新父页面指定方法

时间:2021-01-05 14:58:54      阅读:18      评论:0      收藏:0      [点我收藏+]

一、页面执行流程说明:

1.点击父页面a.html的“点我打开新窗口”按钮-->弹出新窗口(b.html)

2.关闭弹出的新窗口b.html-->刷新父页面a.html


二、实现步骤:

要点:1.给按钮的点击事件编写函数f1(),用于弹出新窗口   window.open(新窗口的url,"",窗口参数)

2.给弹出的新窗口添加对关闭事件的监听(window.onbeforeunload),通过该监听来实现父页面刷新

说明:要点2中的实现参考了qq_26676207转载的js关闭当前页面刷新父页面


三、代码:

父页面 a.html

  1. <head>
  2. <script>
  3. function f1(){
  4. window.open("b.html","","width=800px,height=600px");
  5. }
  6. </script>
  7. </head>
  8.  
  9. <body>
  10. <button οnclick="f1()">点我打开新窗口</button>
  11. </body>

 

子页面 b.html

  1. <head>
  2. <script>
  3. window.onbeforeunload = function() {
  4. window.opener.location.reload();
  5. };
  6. </script>
  7. </head>
  8.  
  9. <body>
  10. <h2>这是b.html</h2>
  11. </body>

 

四、测试

1.打开a.html

技术分享图片

2.点击“点我打开新窗口”按钮

技术分享图片



3.点击弹出窗口右上角的“关闭”按钮

技术分享图片

这时我们看到控制台的“网络”部分捕捉到了一个新的页面请求,说明父页面(a.html)被刷新了

JS中关闭新页面时刷新父页面指定方法

原文:https://www.cnblogs.com/lijl/p/14235161.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!