整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

整理关于html子页面刷新父页面的功能说明

有两个页面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 通过这样的操作很容易在子页面操作父页面所有的方法,感觉很方便,整理一下供大家参考。

欢迎关注我的头条号,谢谢大家!

项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面.

思路

  • (1)如果页面简单,调用接口刷新数据即可.
  • (2)如果页面复杂,需要调用多个接口或者通知多个子组件做刷新,可以采用刷新当前页面的方式 下面整理了3种方式来实现刷新当前页面,每种方式的思路不同,各有优缺点

实现

方式1-通过location.reload和$router.go(0)方法

(a)概述

通过location.reload和$router.go(0)都可以实现页面刷新,它利用浏览器刷新功能,相当于按下了f5键刷新页面
优点:足够简单
缺点:会出现页面空白,用户体验不好

(b)代码

天给大家说一下HTML父页面调用iframe子页面中js变量和方法,

以jQuery为例,假如子iframe为

现在obj为jQuery对象

获取子页面DOM

调用子页面js变量和方法

还有一种方法,根据iframe的name获取

小编会不定时更新前端相关的知识,有兴趣的话欢迎大家加群142991222一起讨论交流学习。