关闭弹出窗体，刷新父页面

最新推荐文章于 2023-02-27 16:46:06 发布

cdefg198

最新推荐文章于 2023-02-27 16:46:06 发布

阅读量2.2k

点赞数

分类专栏： js css 文章标签： html button 微软

js 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

css

29 篇文章 0 订阅

订阅专栏

功能：

点击页面A，隐藏页面A的内容（如果是在动态网页中，弹出窗体做修改会用到，这里是静态页面用隐藏内容来做演示）

弹出页面B，在页面B做修改后，关闭页面B，刷新页面A的数据。

原理：

在页面B的退出事件中，让父窗体的地址重新加载一遍。

代码：

1、页面A：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> frmA</title>
<style type="text/css">
#txtV
{
width: 357px;
}
#btnOpen
{
width:auto;
}
</style>
<!--点击btnOpen，清空当前txtV的值，弹出页面2-->
<script language="javascript">
function OpenB(){
document.getElementById("txtV").style.display="none";
window.open("frmB.html","","width=300,height=300");
}
</script>
</head>

<body>
<div style="margin-left:100px;margin-top:100px;border:2px solid green;width:400px;padding:30px;">
<input id="txtV" value="这是第一个页面的值，当弹出页面2时就会隐藏.不信试试？"
type="text"/><br /><br />
<input id="btnOpen" οnclick="OpenB()" value="弹出第二个页面" type="button" />
</div>
</body>
</html>

2、页面B



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> frmB</title>
</head>

<body οnbefοreunlοad="window.opener.location.href=window.opener.location.href">
<div style="width:200px;height:200px;border:2px solid green;margin-left:20px;
margin-top:25px;padding:25px;font-family:微软雅黑;font-size:12px;">
在这里退出的时,可以看见frmA文本内容已经显示.<br /><br /><br />关闭吧！come on, baby！<br />
<input οnclick="Javscript:window.opener.location.href=window.opener.location.href;window.close()"
value="这里也可以关闭哦" type="button"/>
</div>
</body>
</html>




效果：
1、点击前：
 

2、点击后：

3、关闭后：

cdefg198

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关闭弹出窗体，刷新父页面

功能：点击页面A，隐藏页面A的内容（如果是在动态网页中，弹出窗体做修改会用到，这里是静态页面用隐藏内容来做演示）弹出页面B，在页面B做修改后，关闭页面B，刷新页面A的数据。原理：在页面B的退出事件中，让父窗体的地址重新
复制链接

扫一扫