子页面关闭时刷新父页面的解决方案
子页面关闭时刷新父页面的解决方案
可用于:子页面关闭时刷新父页面(重新加载数据)
因浏览器限制,父子页面必须在同一域名下,请部署到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>