<一> 在B/S架构的项目中,为了提高项目的易用性,增强系统与用户的交互功能,一般使用弹出页面来为用户提供操作或数据选择帮助信息,比如,用户输入一个编码中某些字符,在弹出页面中显示所有包含这些字符的编码信息,从而帮助用户选择一个精确的编码.
<二> 常使用的弹出页面方法有三种,分别是window.open/showModalDialog/showModelessDialog.其中的window.open是以一个页面的形式打开,如果页面包含脚本代码,会有限制活动内容的提示,而后两种是以网页对话框的形式显示,脚本可以自由运行.
<三> 三种方法均有返回值,其中window.open和showModelessDialog这两种方法返回的是弹出窗口页面的句柄,通过这个句柄取弹出窗口中控件的值以及为弹出窗口添加控件等动作,而showModalDialog返回值是则是用户在弹出窗口中自定义的任何类型数据,一般是把在弹出窗口中选择的值封装一个数组返回到父窗口中.
1>open方法的返回句柄是在窗口打开之时返回,可使用此句柄得到静态控件的值.
父窗口代码:
var handle=window.open('openPage.html','NEW_PAGE','height=120px,width=500px,top=280px,left=280px,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');
alert( handle.document.getElementById( "SUB_TEXT").value);
子窗口代码:
<input type='text' id='SUB_TEXT' value='38938'>
在弹出窗口被打开之后,会打出子窗口控件SUB_TEXT的值38938
上面是父窗口代码截图
上图是点击按钮"open新页面"后台的结果
2>showModalDialog()方法的返回值也是在窗口关闭之后返回,不过返回值是弹出窗口中定义的任意类型的数据
父窗口代码:
var result= showModalDialog("showModalDialog.html",window,"center:yes;help:no;resizable:no;scroll:no;status:no;dialogWidth:550px;dialogHeight:105px");
alert(result);
子窗口代码:
var result = "abc";
parent.returnValue = result;
parent.close();
在弹出窗口关闭后,会打出弹出窗口中设定的字符串abc.
3>showModelessDialog()方法的返回值是在窗口弹出时已经返回,所以可以得到的只能是已经被预先赋值的控件的值.
父窗口代码:
var result=showModelessDialog("showModallessDialog.html",window,"center:yes;help:no;resizable:no;scroll:no;status:no;dialogWidth:550px;dialogHeight:105px");
alert(result.document.getElementById( 'SUB_TEXT' ).value);
子窗口代码:
<input type="text" name="SUB_TEXT" value="500122">
在子窗口弹出后的同时,会打出其控件SUB_TEXT预先赋好的值500112
<四> 三种方法均可以使弹出窗口得到父窗口各控件的值.两种打开对话框的方法都是通过在方法参数中传递父窗口的句柄来实现此功能,而open方法则不能在方法参数中传递父窗口句柄,而是在子窗口的写js代码来取得此弹出窗口依赖的父窗口的句柄,得到父窗口的句柄后,可以取父窗口中的控件值以及设置父窗口中控件值,open的第二个参数是不能为window的.
1>使用open弹出的子窗口,不能使用传递参数的办法得到父窗口句柄,可使用window的内建对像opener来取的.
首先判断opener是否存在,即当前窗口有没有父窗口,有则opener即为父窗口的句柄,然后就可以使用此句柄来操作父窗口中的控件了,之所以使用这种方式,是因为在弹出窗口未关闭的情况下父窗口可能已经关闭了.
子窗口代码:
if( window.opener )
{
var parentTab = window.opener.document.getElementById( "tab" );
parentTab.rows[1].cells[0].innerText=number;
.......
window.close();
}
2>使用打开网页对话框(模式和非模式)的方法打开子窗口,可以使用第二个参数传递父窗口的句柄到子窗口中.
父窗口代码:
var result=showModalDialog("showModalDialog.html",window,......
或
var result=showModelessDialog("showModallessDialog.html",window,.....
子窗口代码:
var a = window.dialogArguments;
a.document.forms[0].TEST.value="500000";
在子窗口中,得到父窗口打开方法的第二个参数window,此变量即是父窗口的句柄,使用此句柄就可以在子窗口中得到父窗口的控件值了
<五> 各方法参数
1>window.open( url, name, parameters, bReplace )
此方法弹出页面同普通的网页具有相同的属性,如果默认则弹出一个空白页面,可以查看源代码,可以刷新等.完整的参数列表是
a> url: 可选项,用字符串表示的加弹出的页面的文件绝对路径或相对路径,文件可以是html/jsp/asp等格式,在j2ee中,url还可以是具有请求作用的抽象连接或可解析出文件路径或抽象连接的标签,并可能在此连接之向被请求方传递参数名/值,如struts中的action;
假如此参数没有指定,则会弹出一个默认的空白窗口about:blank.
此方法加载弹出页面的时间相对于使用网页对话框来说有些慢.
b> name: 可选项,指定打开的窗口的名字.这个名字可以用于form或a对象的target属性.此名字也可以使用下列通用名称:
_media IE6.0在浏览器左边的媒体面板内打开sUrl.
_blank 在新窗口中打开sUrl.
_parent 在当前框架的父框架内打开.假如当前框架无父框架,此参数值等同于_self.
_search IE5.0在浏览器左边的搜索面板内打开sUrl.
_selfsUrl 在当前窗口中打开,覆盖当前文档.
_top 在所有框架之外的最顶层窗口中打开sUrl.假如当前窗口无框架结构,此参数值等同于_self.
c> 各项参数,可选项,字符串形式,各参数使用","号分隔,主要用来指定窗口装饰样式.只有当新的浏览器窗口被建立时,此参数的设置才会发生作用,下面是参数列表,可
根据实际需要选用相应的参数或设置相应的值.
其中yes/no也可使用1/0,pixel value为具体的数值,单位象素
---------------------------------------------------------------
参数 | 取值范围 | 说明
---------------------------------------------------------------
alwaysLowered | yes/no;1/0 | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no;1/0 | 指定窗口悬浮在所有窗口之上
depended | yes/no;1/0 | 是否和父窗口同时关闭
directories | yes/no;1/0 | 是否显示"链接"按钮,默认为不显示
height | pixel value | 窗口高度
width | pixel value | 窗口宽度,最小值为100
left | pixel value | 窗口左上角相对于桌面的横坐标,单位为像素(px)
top | pixel value | 窗口左上角相对于桌面的纵坐标,单位为像素(px)
outerHeight | pixel value | 窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 窗口(包括装饰边框)的像素宽度
hotkeys | yes/no;1/0 | 在没菜单栏的窗口中设安全退出热键
innerHeight | pixel value | 窗口文档的像素高度
innerWidth | pixel value | 窗口文档的像素宽度
location | yes/no;1/0 | 地址栏是否可见,默认为不可见
menubar | yes/no;1/0 | 菜单栏是否可见,默认为不可见
resizable | yes/no;1/0 | 窗口大小是否可调整,默认为不可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no;1/0 | 是否有滚动栏,默认为无
titlebar | yes/no;1/0 | 标题栏是否可见,默认不可见,调用程序非HTML应用程序(HTA)或被信任的对话框时此参数忽略
toolbar | yes/no;1/0 | 工具栏是否可见,默认为不可见
status | yes/no;1/0 | 状态栏是否可见,默认值不可见
z-look | yes/no;1/0 | 窗口被激活后是否浮在其它窗口之上
channelmode | yes/no;1/0 | 指定是否将窗口显示为频道模式,默认为no
fullscreen | yes/no;1/0 | 指定是否以全屏方式显示窗口,默认值no,此模式会隐藏窗口的标题栏和菜单,可使用ALT+F4快捷键关闭
---------------------------------------------------------------
d> bReplace: 可选项.布尔值(Boolean).false|true
false新打开的文档覆盖历史列表里的当前文档.
true文新打开的文档被简单的添加到历史列表的最后.
2>showModalDialog/showModelessDialog (sURL [, vArguments] [, sFeatures])
其中sUrl参数是对话框要显示的文档的URL,是必需参数,vArguments和sFeatures不是必需参数
a>vArguments参数可以向子窗口传递任意类型数据,包括父窗口句柄,子窗口使用window.dialogArguments方法来得到父窗口传递来的数据
b>sFeatures是对话框样式参数
---------------------------------------------------------------
参数 | 取值范围 | 说明
---------------------------------------------------------------
dialogWidth | pixel value | 对话框宽度
dialogHeight | pixel value | 对话框高度
dialogLeft | pixel value | 距离桌面左的距离
dialogTop | pixel value | 离桌面上的距离
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
---------------------------------------------------------------
对话框高度和宽度的值不小于100px,IE4中dialogHeight和dialogWidth默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,最好用px做单位.
