当前位置: 代码迷 >> Web前端 >> showModel的运用体会
  详细解决方案

showModel的运用体会

热度:253   发布时间:2012-11-14 10:12:19.0
showModel的使用体会

ShowModalDialog函数的功能:
打开一个子窗口,并且可与父窗口相互传递数据,它与window.open的最大区别就在于由ShowModalDialog打开子窗口后,父窗口将不能操作。
使用方法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
参数说明:
sURL
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过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。
参数传递方法:
父窗口向子窗口传递参数采用ShowModalDialog的第2个参数即可,父窗口要获取子窗口传回的参数则可通过ShowModalDialog函数的返回值获取。
子窗口获取父窗口参数的方法为采用子窗口window对象dialogArguments属性获取,例如:
var a=window.dialogArguments;
子窗口向父窗口返回参数采用window.returnValue属性,如:
window.returnValue=1;
window.close();

?

注意:使用ShowModalDialog打开的子窗口会存在一个问题,就是点击子窗口的按钮提交服务器时,不执行按钮事件,而是打开一个新的窗口。解决的办法如下:

在子窗口的<head>里加入如下内容既可避免出现上面的问题

<base target="_self" /><!--这句话非常重要,只要加上才能保证在弹出窗口中调用服务端代码而不会再弹出一个新窗口-->

?

?

使用体会

1.
??????? <base target="_self" />在IE7中无效的解决办法
通过ShowModalDialog 打开页面,在POSTBACK时,打开新的页面,
在IE6下没问题,只有在IE7下,会重新打开一新页面,

其实只要把<base target="_self"/>放到<head>下即可。
<head>
<base target="_self"/>
。。。。

而在IE6中位置没有限制。一定要求是放在<head>下面
关键字: _self, <base target=/> ie6.0 ie7.0
最近项目中一个小问题卡了我不少时间。我遇到的问题是:在项目的弹出式的模型窗口里,我需要将数据提交到服务器。然后从服务器再返回到本页面。结果:返回了本页面,窗口却是从新打开的。
  现在来谈一下解决方法:书上说在模型窗口中加入<base target="_self"/>标签即可。我把该标签放上去却没有任何反应,当时我不明白这为什么?后来经过查证原来这个属性有IE6与IE7之分。忘了说我的浏览器是IE7的。
注:
1、如果你是IE6,你将<base target="_self"/>加入到<head>标签里就可以了。
2、如果你是IE7,你必须将<base target="_self"/>加入到<head>的对口中位置。
代码示例:
<html>
<head>
<title>test</title>
<base target="_self"/>
.............
</head>
</html>
target 属性 -- 代表链接目标
取值
_blank -- 打开一个新窗体
_parent -- 在父窗体中打开
_self -- 在本页打开,此为默认值
_top -- 在上层窗体中打开
一个对应的框架页的名称 -- 在对应框架页中打开
此标记已经被w3c抛弃


showModel的调用
父页面代码:
???? var ts = window.showModalDialog("<%=path%>"+"/adv/AdvRegisterAction.do?act=advList&cusName="+cusName+"&time="+new Date(),window,"dialogWidth:650px;dialogHeight:450px;center:yes;help:no;status:no;resizable:no");
???? theForm.elements("registerDto.ads.cusId").value=ts[0];??????? //ts为返回值
???? theForm.elements("registerDto.ads.contId").value=ts[1];
???? theForm.elements("registerDto.ads.cusName").value=ts[2];

?? 打开的页面:
??????? function select(conId,cusId,cusName){
??????????????????? var ts = new Array();
??????????????????? ts[0]=cusId;
??????????????????? ts[1]=conId;
??????????????????? ts[2]=cusName;
??????????????????? window.returnValue = ts;
??????? window.close();
??? }

? 这样既可以再父主页面之间传递数据,不过这种形式在IE7.0中存在问题。
  相关解决方案