功能:
点击页面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;400px;padding:30px;">
<input id="txtV" value="这是第一个页面的值,当弹出页面2时就会隐藏.不信试试?"
type="text"/><br /><br />
<input id="btnOpen" onclick="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 onbeforeunload="window.opener.location.href=window.opener.location.href">
<div style="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 onclick="Javscript:window.opener.location.href=window.opener.location.href;window.close()"
value="这里也可以关闭哦" type="button"/>
</div>
</body>
</html>
效果:
1、点击前:
2、点击后:
3、关闭后: