专业编程基础技术教程

网站首页 > 基础教程 正文

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

ccvgpt 2024-10-17 08:53:49 基础教程 6 ℃

1有两个页面parent.html和child.html，在parent页面里面通过window.open打开了child页面，child页面执行完代码之后想要刷新parent页面，然后立即查看到修改后的效果，那么我们就要在child里面直接能够刷新parent页面，这样就可以实现这样的效果。

1.1打开了parent.html页面

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

欢迎关注我的头条号，谢谢大家！

Tags：

猜你喜欢

最近发表
标签列表