有两个页面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 通过这样的操作很容易在子页面操作父页面所有的方法,感觉很方便,整理一下供大家参考。
欢迎关注我的头条号,谢谢大家!
项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面.
通过location.reload和$router.go(0)都可以实现页面刷新,它利用浏览器刷新功能,相当于按下了f5键刷新页面
优点:足够简单
缺点:会出现页面空白,用户体验不好
天给大家说一下HTML父页面调用iframe子页面中js变量和方法,
以jQuery为例,假如子iframe为
现在obj为jQuery对象
获取子页面DOM
调用子页面js变量和方法
还有一种方法,根据iframe的name获取
小编会不定时更新前端相关的知识,有兴趣的话欢迎大家加群142991222一起讨论交流学习。
*请认真填写需求信息,我们会在24小时内与您取得联系。