1有两个页面parent.html和child.html,在parent页面里面通过window.open打开了child页面,child页面执行完代码之后想要刷新parent页面,然后立即查看到修改后的效果,那么我们就要在child里面直接能够刷新parent页面,这样就可以实现这样的效果。
1.1打开了parent.html页面
1.2在parent页面打开了child页面
1.3child页面点击确定按钮之后刷新了父页面parent
2 parent.html内容:
<!DOCTYPE html>
<html>
<head>
<title>parents</title>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript">
function openWin() {
window.open('child.html', '_blank','width=500,height=400,top=200,left=400');
}
//定义callback方法,用于回调
function callback() {
refreshWin();
}
//刷新当前页面
function refreshWin() {
//调用刷新页面的方法,刷新当前页面,结果会再次弹出222
window.location.reload();
}
//刚记载的时候弹出222
function show(){
alert(222);
}
</script>
</head>
<body onload="show()">
<input id="btnAdd" type="button" onclick="openWin();" value="添加" />
</body>
</html>
3 child.html内容:
<!DOCTYPE html>
<html>
<head>
<title>child</title>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript">
function formSubmit(){
window.opener.callback();//上述执行完成后,调用打开页面的callback方法,此处是调用主页面的callback方法
window.close();//当前页面关闭
}
</script>
</head>
<body>
<input id="onSub" type="button" onclick="formSubmit();" value="确定">
</body>
</html>
4 通过这样的操作很容易在子页面操作父页面所有的方法,感觉很方便,整理一下供大家参考。
欢迎关注我的头条号,谢谢大家!