js中模态窗口与非模态窗口初探(1)
编程也有一点时间了,一直都沉迷于B/S框架下,B/S框架就不得不接触js,接触的多了就会有一种意外——日久生情。真的很喜欢这个语言,尤其是在接触ajax之后。
在这仅有的一点点时间里,碰到了几次用模态窗口编程,每次都是上网查,网上的资料又太杂,虽说现在查找的范围有时候都仅限于园子,但是还是……所以,今天干脆花了一点时间把这些资料整理了一下。希望和大家一起分享一下,同时也希望大家看到我的不足和不对的地方帮我补充和纠正一下。
先说一下我今天碰到的问题。
我需要在一个页面A,用模态窗口打开一个新的页面B。在页面B中进行数据操作,操作完成关闭页面B,关闭页面B的同时要刷新页面A。
一开始我想到是这样去做
A.html
![](/Images/OutliningIndicators/ContractedBlock.gif)
B.html
![](/Images/OutliningIndicators/ContractedBlock.gif)
我电脑上现在只有两个浏览器,IE8和FireFox3,备用电脑上有IE7。
我分别进行了测试,在IE8中报"window.opener.location为空或不是对象"这个错误,我以为是浏览器的问题(自从开始学ajax,我就养成了这样一个不好的习惯)。我用三个浏览器分别进行了测试,结果如下:
IE7和IE8都报上面那个错。
FireFox3可以达到我预期的目的。
这就很让我郁闷了,因为至少有一个好使,证明我的想法至少不错。
这里我要说一下window.showModalDialog(URL[, vArguments] [, sFeatures])这个方法的参数。这些参数网上到处可以当到。
参数说明:
URL
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
Arguments
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
dialogWidth: 对话框宽度。
dialogLeft: 距离桌面左的距离。
dialogTop: 离桌面上的距离。
center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认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
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
我在这里想说一下,我在做这个过程中碰到的一些问题。
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()是不刷新的。