子页面关闭时刷新父页面的解决方案

子页面关闭时刷新父页面的解决方案

可用于:子页面关闭时刷新父页面(重新加载数据)
因浏览器限制,父子页面必须在同一域名下,请部署到Web服务器之后测试

演示

演示效果:子页面关闭或刷新,均会导致父页面的数字+1

父子页面

父页面father.html源码

<html>
    <head>
        <title>
            父页面
        </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script>
            function windowOpen(){
                window.open('son.html','子页面');
            }
        </script>
    </head>
    <body>
        <h1 id="id">1</h1>
        <input type="button" value="子页面" onclick="windowOpen()" />
    </body>
</html>

子页面son.html源码

<html>
    <head>
        <title>
            子页面
        </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script>
	      window.onbeforeunload = function(){
	          var num = +window.opener.document.getElementById("id").innerHTML;
	          window.opener.document.getElementById("id").innerHTML = 1+ num;
	      }
        </script>
    </head>
    <body>
        <h1>我是子页面</h1>
    </body>
</html>
posted @ 2020-12-07 14:54  大志若愚  阅读(850)  评论(0编辑  收藏  举报