找回密码
 入住遨海湾
搜索
网站解决方案专享优惠-3折上云
查看: 1442|回复: 1

window.showModalDialog以及window.open用法简介

[复制链接]
发表于 2004-9-21 10:44:00 | 显示全部楼层 |阅读模式

登录后查才能浏览下载更多咨询,有问题联系QQ:3283999

您需要 登录 才可以下载或查看,没有账号?入住遨海湾

×
一、window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ $ W( f/ C- _$ d5 `# ^% K+ _- u1 z+ z* b% T1 q1 d D0 Q$ V M9 g二、基本语法: ; s0 u9 l5 ^' j3 a4 U" cwindow.open(pageURL,name,parameters) B) l+ _! w4 ^7 H" f4 c' g% \ 其中: 9 f2 M3 n9 `8 EpageURL 为子窗口路径 8 T/ @ y' c' W* T1 k7 A/ ?name 为子窗口句柄 2 m5 u# u$ \6 C2 P& ]+ `parameters 为窗口参数(各参数用逗号分隔) 8 o7 B4 g6 c8 C6 _; ~4 i4 w9 {5 X ^8 ^. n4 ]6 W N* s! e* m$ C 三、示例:7 ~0 t% o8 s) z1 J" f. y) V <SCRIPT> . c. c9 e* s. C% B8 `<!-- * B, j( @; p" I6 v# ? window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') 9 k$ a# [4 p5 A- M3 k //写成一行 ' V3 t( e" l, S" f- Q/ h3 o --> ' r, |. L1 F& @6 |3 m1 K4 g# g1 r</SCRIPT> 5 T+ ]( b. S& {0 x5 l( E脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。: }, {* U& A$ l; [, e 请对照。3 v7 S& J' j0 M( c/ p" [ ; y$ n2 F% R$ o- f- H' T) T 上例中涉及的为常用的几个参数,除此以外还有很多其他参数,请见四。( a+ ]- ~3 ^/ Y% S6 z/ X8 E L9 `# q# @0 f$ x7 l# L7 g - @6 e$ R* N: H2 k" U 四、各项参数: i/ O; C5 \2 g" l x+ d- j 其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。 ) g, k+ G- s0 S0 ]9 M: B; b, j3 ?" y3 V' w7 N, r# l @% V5 l3 B; Q& m7 W 参数 | 取值范围 | 说明 3 P) X F$ ]0 U, @| | ' E7 `/ n# W* i- `alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 5 S# M y2 _( f+ `& \4 A) ralwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 9 v$ R7 F- o, T5 w depended | yes/no | 是否和父窗口同时关闭 6 w5 g; o3 X" Y7 A8 G directories | yes/no | Nav2和3的目录栏是否可见 7 b: W# P$ X) P height | pixel value | 窗口高度 * K8 s! m j9 P6 }' S# M) s( \$ F5 V3 k hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键 ! _1 n8 [0 }+ s6 hinnerHeight | pixel value | 窗口中文档的像素高度 # T) [: _+ G# g& z( e0 c7 cinnerWidth | pixel value | 窗口中文档的像素宽度 # s' U/ k; X7 I# g/ R1 W' Flocation | yes/no | 位置栏是否可见 ! n4 i# b9 Q$ U Y4 j3 \+ V. M6 A menubar | yes/no | 菜单栏是否可见 f2 G7 L$ ?& HouterHeight | pixel value | 设定窗口(包括装饰边框)的像素高度 ( B$ y0 l$ F# K5 t5 C# D8 X XouterWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度 8 s2 m- I' b! Xresizable | yes/no | 窗口大小是否可调整 3 ?% h5 {% `" V9 Y( U' [screenX | pixel value | 窗口距屏幕左边界的像素长度 , b- v1 Y$ C, z9 j5 v0 {screenY | pixel value | 窗口距屏幕上边界的像素长度 3 C! A4 `0 d1 ?+ rscrollbars | yes/no | 窗口是否可有滚动栏 # O" b6 g% u* p5 R/ w, ~ titlebar | yes/no | 窗口题目栏是否可见 7 C# P" h0 I: r0 t. s1 Q toolbar | yes/no | 窗口工具栏是否可见 & F; G( v C( |9 K+ ]Width | pixel value | 窗口的像素宽度 ; N+ Z' j; p4 C8 z( n. a! k- x z-look | yes/no | 窗口被激活后是否浮在其它窗口之上 7 v0 u7 _( J$ X' f/ `+ F! g& W8 Fwindow.showModalDialog使用手册2 G3 K, x" n5 |4 n3 R5 L 基本介绍: }9 q; X# g4 t0 E- _ showModalDialog() (IE 4+ 支持) 7 Z/ J; J* O# A* ?showModelessDialog() (IE 5+ 支持)# `8 U0 m+ r6 ^2 x: C window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 5 s T8 U0 z* }7 O! z& |window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。6 y- I, i9 l9 F& c7 w! t$ @6 e; m 2 a* F% Q" b6 m, Y! Z5 C使用方法: $ f& ^) T J! x2 Y0 L+ L) EvReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])% C$ w H$ K; A# P vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures]) ; e8 H k/ y: D+ W2 M: N , Y$ \4 t, u* S' t0 \9 B4 b9 K% y参数说明:/ d, e3 v! U0 S6 [+ o" G& b9 I. d' p sURL--% N% e$ t; F( J 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。9 |3 ]7 d) d/ @: J, o, o vArguments-- 6 b2 o- [) j3 ~! O: o& W可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 ) ]- B! ^8 T6 c E3 ^" bsFeatures-- + o; H6 o. p; A$ b可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。 3 R1 V1 ?8 U) P" }' X6 g H/ K1 _1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。 & @* J" {: |" w2.dialogWidth: 对话框宽度。9 E4 T0 o; _* U# P) S' Y 3.dialogLeft: 离屏幕左的距离。% V+ i+ _, H6 c 4.dialogTop: 离屏幕上的距离。 : v2 G& J R. @) I) R5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。 0 h% k% j- m. B6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。9 S# @( A/ d. |9 { 7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。 . z1 j) j9 ^5 ], P) K* a! j8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 1 ]% ^" O% X) l; t9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。 9 b+ v0 M0 k. I' \下面几个属性是用在HTA中的,在一般的网页中一般不使用。/ ^& e$ ~, G* [( y1 P3 {( } 10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。 6 a8 U" l: h. R! W* ?' w$ r11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。 0 Z# G4 \. I }2 T1 x12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。' D! G; e% }' m / Q" i0 q% F: ?$ ~* S' i: L% s参数传递: - T. s" W2 e2 p5 ]! b% Y3 G1.要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:( T9 |. B! k# N( ^ -------------------------------- g) i3 i* L+ U. b- m parent.htm6 A5 o) X) b" t7 E/ k o <script> ) Y4 H4 _1 B9 c. {var obj = new Object(); 0 i1 y3 d4 S: a3 X, [obj.name="51js"; 9 l1 x; U8 c' Y4 M: U8 P% h Rwindow.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");9 @7 u; J6 {# d8 s1 b3 n0 Y# l </script>1 J) t& }% l) T5 k modal.htm - R# y+ f' `# v6 o% s5 z5 W<script> ! D% ^2 ]( M7 z% {: G- C4 Wvar obj = window.dialogArguments8 q' C; X5 |1 i6 I alert("您传递的参数为:" + obj.name)/ @4 v% J5 P' G% Y9 F2 \/ p. Y </script>6 Q/ N3 K7 n5 Y `+ J* J6 S. P -------------------------------+ _8 g- B9 l) e$ D# z) m& U 2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如: 1 Y: I9 |: l* K9 ^------------------------------4 {' f' o( u6 {( `: d4 Q parent.htm4 i- c4 i: @# M3 O) U <script> 2 Z* x9 y6 @4 H9 \9 X5 @1 Ystr =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); 6 X7 I5 U4 R0 a2 a8 palert(str);0 l; L8 ?3 c) u5 b6 O, F </script> . L3 X9 N) K( ?& N1 k+ i, lmodal.htm 2 W% l+ \2 {9 Y* B2 N; D5 q Y<script> : c- J7 O) a$ p5 n4 }+ e5 Xwindow.returnValue="http://www.51js.com"; 9 h( f0 N" ~5 {$ E</script>( R8 M N& x. t8 Z' ^" h , a5 |/ v5 n# ?5 I" ] [em09]
遨海湾-心灵的港湾 www.aosea.com
 楼主| 发表于 2004-9-21 10:46:00 | 显示全部楼层
Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如:

showModalDialog() (IE 4+ 支持); D: F T2 a9 o+ ]( a3 G; k   showModelessDialog() (IE 5+ 支持)

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。

window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

当我们用showModelessDialog()打开窗口时,不必用window.close()去关闭它,当以非模态方式[IE5]打开时, 打开对话框的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。而模态[IE4]方式的对话框始终有焦点(焦点不可移走,直到它关闭)。模态对话框和打开它的窗口相联系,因此我们打开另外的窗口时,他们的链接关系依然保存,并且隐藏在活动窗口的下面。

使用方法如下:# q# \) s3 O g! L8 } vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])2 @6 i. O; J( l% R% w3 _3 {, C vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])

参数说明:& [2 c& C' U$ E) }# }2 V sURL4 H5 b: w1 B* o3 o" `# j 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。3 |' a! ?5 J3 V+ H vArguments ' U: V" h! G% F) e; v; ~ 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 ; L; ]/ V, O2 H [; ~1 O/ } sFeatures - r: l P# ^% k, l7 Q6 s 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。 * {" v2 r* I' I2 q* e) T9 B dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。: U r$ e# Q# ?7 q+ D   dialogWidth: 对话框宽度。5 w) X( z; h3 @. C* _   dialogLeft: 距离桌面左的距离。/ L1 z( a' B% }# r7 ~   dialogTop: 离桌面上的距离。 # D/ Q6 l0 V* e, o2 ^' @/ K5 W$ q2 D   center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。 + u, y8 b) E5 e   help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。: @* O: ~7 ]# Y5 F9 f& G; W   resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。 6 J' Q: D1 c/ C! M5 N   status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。7 K+ l) ~ D* u$ c scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的,在一般的网页中一般不使用。8 O: ]; }* i. t( T dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。 * W1 H0 ]! I1 U% C: v" n edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。 3 b @+ `# e7 Z( f/ Q unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

传入参数: ' d! A- l) {0 `2 B4 D 要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:

test1.htm3 \; p1 B9 a* Q n6 }8 O <script>& B6 ^8 `2 n8 g* j7 ~+ [ var mxh1 = new Array("mxh","net_lover","孟子E章")9 F6 @' R9 W# ~ var mxh2 = window.open("about:blank","window_mxh")9 G/ D" A7 \: ]% j // 向对话框传递数组2 V/ O. h* |- q# P6 V7 Y1 \ window.showModalDialog("test2.htm",mxh1) , A) M( m" S! T4 ]5 A7 h! ~! e4 d // 向对话框传递window对象 ' J- ?# Y) h" S7 g1 u window.showModalDialog("test3.htm",mxh2)! \+ B4 h! N# T5 A0 C; M </script>test2.htm . R8 u& L2 U7 e5 O" a2 D( f* ]# S<script> + \ n' c; W0 P# `# Z( O2 P var a = window.dialogArguments 9 D H* c4 c3 U alert("您传递的参数为:" + a) Q6 F1 c8 m% E/ c6 Y& k4 ~ </script> ; e- n2 a3 y. H% h ~/ A6 p test3.htm5 z3 ^% @7 @3 c0 H& \) r <script># e# k" i8 k0 z9 U var a = window.dialogArguments : z8 H' A# D6 T9 |# V, J alert("您传递的参数为window对象,名称:" + a.name) " l8 M; n' Q+ p/ X </script>

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

test4.htm 6 h, C `+ M) T4 ^$ H<script>6 Q$ ]! |$ k: _/ K* m8 L9 E5 x# K var a = window.showModalDialog("test5.htm") . b* `0 K) ?& M. O for(i=0;i<a.length;i++) alert(a)& X; O9 {7 R8 q# x) i4 O </script>test5.htm/ @* m5 A" B F: b# A! a6 C- B- p <script> . u+ G: A$ v5 |+ S# M function sendTo() - q x# l2 i4 i { Q% v/ E1 N) e6 Z3 H# Z# F var a=new Array("a","b") ; M% s' M2 Y. n$ L* k window.returnValue = a 2 a* y7 ]$ B H window.close() ( `' f" @/ I8 `5 }4 @+ ^: I }5 U( I( C, G2 k" o: u </script> % n, q7 q3 v5 { <body> , D; n/ v3 Z/ _7 } <form>: C0 B9 g3 K! k3 x <input value="返回" type=button onclick="sendTo()">, C# q" `- l* Y( ~+ P7 } </form>

常见问题:. D( Y4 b6 g9 {$ I4 @) p 1,如何在模态对话框中进行提交而不新开窗口? + ?7 A5 e0 a P7 h$ f1 P! q 如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作。例如:

$ A% l: V+ Y/ M8 f4 e. ?

遨海湾-心灵的港湾 www.aosea.com
您需要登录后才可以回帖 登录 | 入住遨海湾

本版积分规则

网站解决方案专享优惠-3折上云

QQ|手机版|小黑屋|遨海湾超级社区

GMT+8, 2024-11-22 07:24

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表