Heim > Web-Frontend > js-Tutorial > Hauptteil

javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例_javascript技巧

PHP中文网
Freigeben: 2016-05-16 18:42:11
Original
1269 Leute haben es durchsucht

javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例代码。

先简单介绍一下基本知识:
一、window.open()支持环境: Java1.0+/J1.0+/Nav2+/IE3+/Opera3+
二、基本语法:
window.open(pageURL,name,parameters)
其中:
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)
三、各项参数
其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。
参数 | 取值范围 | 说明
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见
height | pixel value | 窗口高度
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value | 窗口中文档的像素宽度
location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见
toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上
window.showModalDialog使用手册
基本介绍:
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。
使用方法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明:
sURL--
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments--
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures--
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的,在一般的网页中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。
参数传递:
1.要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:
-------------------------------
parent.htm

复制代码 代码如下:




modal.htm

复制代码 代码如下:




-------------------------------
2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:
------------------------------
parent.htm

复制代码 代码如下:


< type="text/java">
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);


modal.htm

复制代码 代码如下:




在IE中,我们可以使用showModalDialog来传值。
语法如下:
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
但是.在Firefox中却沒有showModalDialog方法,不过我们可以用window.open()
语法如下:
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
只是,在Firefox下,window.open的参数中,sFeature多了一些功能设定,而在FireFox下要让开启的视窗跟IE的showModalDialog一样的话,只要在sFeatures中加個modal=yes就可以了。
下面用一个示例来说明其用法。
功能说明:从子窗口中输入颜色种类提交到父窗口,并添加选项到下拉列表。
a.html

复制代码 代码如下:






a.html文档










b.html

复制代码 代码如下:





b.html文档











color:



修改为兼容IE和FireFoxr的代码如下:
[code]




a.html文档










b.html

复制代码 代码如下:





b.html文档











color:





下面是网上的朋友发布一篇测试代码,大家可以测试下。

复制代码 代码如下:






主页面







test.html 源代码:

复制代码 代码如下:






获得主页面的值



    script type="text/javascript">
    



showModalDialog 传值及刷新
showModalDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口.
farther.html

复制代码 代码如下:





New Document










传递到父窗口的值:

返回的值:

子窗口设置的值:





child.html

复制代码 代码如下:





New Document












父窗口传递来的值:

输入要设置父窗口的值:

输入返回的值:





说明:
由于showModalDialog缓存严重,下面是在子窗口取消客户端缓存的设置.也可以在服务器端取消缓存,参考:
脚本之家的下一篇文章。



(二)下面是关闭刷新父窗口的例子
farther.html

复制代码 代码如下:





New Document









传递到父窗口的值:





child.html

复制代码 代码如下:





New Document












父窗口传递来的值:







说明
1.下面是取消客户端缓存的:



也可以在服务器端取消缓存,参考脚本之家下一篇文章
2.向父窗口传递阐述在ASP.NET中也可以是用aaa.aspx?id=1的方式传递.
3.不刷新父窗口的话在父窗口中直接这样一来设置可以.
<script> <br>window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px"); <br></script>
4.在子窗口中若要提交页面的话要加入:,这样就不会打开新窗口了.



Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage