关于模态窗口中子父窗口刷新

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

地球没有花

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

阅读量903

点赞数

还有一个方法是这样的：

在父窗口的js脚本中写成下面这样：

<script type="text/javascript">
	function popAddRoleJSP() {
		var DATE = new Date();
		var iWidth = 900; //模态窗口宽度
		var iHeight = 450;//模态窗口高度
		var iTop = (window.screen.height - iHeight) / 2;
		var iLeft = (window.screen.width - iWidth) / 2;
		window.showModalDialog("sonPage.jsp", window, "dialogWidth:320,dialogHeight:320,dialogTop:320,dialogleft:320");	
		//程序运行到showModalDialog会停下来等待子窗口的响应
		//等子窗口处理完毕 父窗口自己自动刷新
		window.location.reload(); 
	}
</script>

为了简单起见我在子窗口sonPage.jsp中只写了一个按钮：

<input id="submit" type="button" value="确定" οnclick="window.close();" />

当子页面关闭后又回到父页面执行window.location.reload();

也可以实现“关闭子页面父页面刷新”的效果。

文中作者的方法是一个方法只不过在FF和Chrome里可以但IE里没有反应

我的这个方法就跟浏览器没有关系因为是父窗口自己刷新不是通过子窗口得到父窗口再“命令”父窗口刷新

下面是网友的一个方法可以参看：

以下内容转自：http://blog.csdn.net/xiaoyu411502/article/details/4663451

编程也有一点时间了，一直都沉迷于B/S框架下，B/S框架就不得不接触js，接触的多了就会有一种意外——日久生情。真的很喜欢这个语言，尤其是在接触ajax之后。

　　在这仅有的一点点时间里，碰到了几次用模态窗口编程，每次都是上网查，网上的资料又太杂，虽说现在查找的范围有时候都仅限于园子，但是还是……所以，今天干脆花了一点时间把这些资料整理了一下。希望和大家一起分享一下，同时也希望大家看到我的不足和不对的地方帮我补充和纠正一下。

　　先说一下我今天碰到的问题。

　　我需要在一个页面A，用模态窗口打开一个新的页面B。在页面B中进行数据操作，操作完成关闭页面B，关闭页面B的同时要刷新页面A。

　　一开始我想到是这样去做

A.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
function openNew(){
var arg = window.showModalDialog("B.html", 'a', "dialogWidth =315px;dialogHeight = 405px;help=0");
}
</script>
</head>
<body>
<input type="button" value="打开" οnclick="openNew();">
</body>
</html>

B.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
function closeCurrentPage()
{
window.opener.location.href=window.opener.location;
window.close();
}
</script>
</head>
<body>
<input type="button" value="关闭并刷新父窗体" name="btnClose" οnclick="closeCurrentPage();">
</body>
</html>

　　我电脑上现在只有两个浏览器，IE8和FireFox3，备用电脑上有IE7。

　　我分别进行了测试，在IE8中报"window.opener.location为空或不是对象"这个错误，我以为是浏览器的问题(自从开始学ajax，我就养成了这样一个不好的习惯)。我用三个浏览器分别进行了测试，结果如下：

　　IE7和IE8都报上面那个错。

　　FireFox3可以达到我预期的目的。

　　这就很让我郁闷了，因为至少有一个好使，证明我的想法至少不错。

　　这里我要说一下window.showModalDialog(URL[, vArguments] [, sFeatures])这个方法的参数。这些参数网上到处可以当到。

　　参数说明：

　　URL

　　必选参数，类型：字符串。用来指定对话框要显示的文档的URL。

　　Arguments

　　可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

　　sFeatures

　　可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
　　dialogHeight 对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
　 dialogWidth: 对话框宽度。
　 dialogLeft: 距离桌面左的距离。
　 dialogTop: 离桌面上的距离。
　 center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
　 help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
　 resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
　 status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

　　这里我觉得Arguments这个参数是很重要的。因为这个参数的类型是不限定的，所以这里可以结合JSON进行数据传递。这B.html页面要去这个值，可以通过window.dialogArguments取值，如果子页面B.html要给父页面返回一个值。可以通过window.returnValue返回一个值。

　　下面是我做的一个实例。A.html用模态打开B.html的时候传一个person参数，B.html进行数据操作之后返回一个信息告诉A.html是否完成。代码如下：

A.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
function test()
{
var person={"name":"hanyang","age":"23"};
var message=window.showModalDialog("B.html", person, "dialogWidth =315px;dialogHeight = 405px;help=0");
alert(message.state);
}
</script>
</head>
<body>
<input type="button" value="test" οnclick="test();">
</body>
</html>

B.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
function closeCurrentPage()
{
var message={"state":"error","info":"404"};
window.returnValue=message;
window.close();
}
</script>
</head>
<body>
<input type="button" value="关闭并刷新父窗体" name="btnClose" οnclick="closeCurrentPage();">
</body>
</html>

其实上面这个代码已经完全实现我今天想要的效果，当然这只是停留在客户端方面。因为有ajax技术，大家可以用JQuery框架进行服务器端的异步调用。

　　我在这里想说一下，我在做这个过程中碰到的一些问题。

　　1、window.opener

　　window.opener得到当前窗口的父窗口，还可以说是打开当前窗口的窗口。这里有一点要说明，用window.open打开这个属性在IE8和FireFox3中都是没有问题的。但是用window.showModalDialog打开一个新窗口，在IE7和IE8中是不支持这个属性的。这个window.opener得到的相当于父窗口的window对象。

　　2、window.parent

　　window.parent是用<a href="">打开的页面支持这个属性。还有就是在iframe中也支持这个属性。

　　还有上面A.html页面中代码刷新页面用window.location.href=window.location.href;而不用window.location.reload();。我在网上搜了一下，没有搜到好的答案，只有一句话"刷新出现错误“新整理网页，必须重新传送资讯”说句实话我不是很明白这句话的意思。但我感觉这可能和Http协议有关系。window.location.reload()相当于按了F5，或者点了刷新按钮，而window.location.href=window.location.href则相当于重定向了一次页面。我想这两行代码在ASP.NET是可以验证的，用Page.IsPostBack属性。如果用window.location.reload()，Page.IsPostBack是true，而用window.location.href=window.location.href则Page.IsPostBack是false。在这里，用window.location.reload()是不刷新的。

地球没有花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于模态窗口中子父窗口刷新

文中作者以下内容转自：http://blog.csdn.net/xiaoyu411502/article/details/4663451编程也有一点时间了，一直都沉迷于B/S框架下，B/S框架就不得不接触js，接触的多了就会有一种意外——日久生情。真的很喜欢这个语言，尤其是在接触ajax之后。　　在这仅有的一点点时间里，碰到了几次用模
复制链接

扫一扫