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

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

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

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

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

×
一、window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ t6 J1 ~) G3 G5 ^ / t, V: g$ g' D' |0 O R" `( Z' p( E 1 u2 Z" Y/ W7 N& O 二、基本语法:$ E5 \1 ~1 d4 n' p window.open(pageURL,name,parameters) 0 J# r# G6 O( L$ T6 _% ?其中:( G+ j& {% [- ^: N pageURL 为子窗口路径 4 N, u9 W+ n1 Z! C6 c name 为子窗口句柄 " I9 ~$ }4 @# \! K/ n' [. s1 c parameters 为窗口参数(各参数用逗号分隔) + o9 L6 C6 a. {, ? n) @ p) }" S8 j1 u) h. E6 q h! R9 j a6 D9 l4 Y4 F三、示例: a8 V8 x7 A; {<SCRIPT> : U# p3 y4 L2 U: T9 P, u7 n<!-- 9 Y$ W& a( V8 Q5 C( ^' i) m# s 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') 6 i0 C5 W$ [7 L, d; u% t //写成一行 6 D8 ^% @) q8 a% ^( b9 \--> 3 z K) C- c& r# f. [. P& ^" A5 [</SCRIPT># h, j3 }& H/ L' C) Z8 ~ 脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。+ k. h+ T4 n: N6 L. H8 B% |/ q 请对照。5 R5 t" V. Y3 a5 { e # G$ a4 Q2 n' F! M9 d 上例中涉及的为常用的几个参数,除此以外还有很多其他参数,请见四。& n* V& P! p' r, ~ n2 j" [# g/ g ! c' L x4 d/ E$ j+ z* c: x 3 @' }6 M$ J$ A. S* v( l四、各项参数 # s. b4 G/ X7 l g5 V其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。' x @5 ]4 a8 l5 I+ |# @ & j) [$ P* t7 j, a( o$ B" Z5 X参数 | 取值范围 | 说明 0 d% o$ d7 L; h) {| | 2 F8 |% F. ~: ?; @alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 0 a" Z+ u* B- j' SalwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 5 g @1 r3 | y: V5 ~# wdepended | yes/no | 是否和父窗口同时关闭 ) m7 ?+ e4 l' l directories | yes/no | Nav2和3的目录栏是否可见 & A' g/ a) `# } q2 r/ x" j height | pixel value | 窗口高度 2 ?0 @5 _) |* f9 t hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键 6 i! r$ m! g Q) M0 e H innerHeight | pixel value | 窗口中文档的像素高度 7 s* T" a2 Q9 ?- g) G( WinnerWidth | pixel value | 窗口中文档的像素宽度 0 c5 W$ u0 ~3 c. {! u location | yes/no | 位置栏是否可见 : v2 o8 T' i6 @/ A1 ]( Imenubar | yes/no | 菜单栏是否可见 . y# Z" W' f, h; \' b D& eouterHeight | pixel value | 设定窗口(包括装饰边框)的像素高度 % E/ b& @3 Y. |+ r. p outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度 & b( W) A( W2 Fresizable | yes/no | 窗口大小是否可调整 / i' I6 I- C' ~4 Q screenX | pixel value | 窗口距屏幕左边界的像素长度 5 H0 k+ F" E# B. u! ^: ^% K screenY | pixel value | 窗口距屏幕上边界的像素长度 ( v) m8 R" R$ f. v+ [$ x7 H4 W0 Q scrollbars | yes/no | 窗口是否可有滚动栏 . Q" |" @: H! f: y8 R8 v6 A. U, F+ ititlebar | yes/no | 窗口题目栏是否可见 . b- X6 V9 H+ Ftoolbar | yes/no | 窗口工具栏是否可见 * N1 I1 p" e3 B q( R! Q/ ^# EWidth | pixel value | 窗口的像素宽度 6 [- A* h+ I! j8 D8 M- V( j% ~z-look | yes/no | 窗口被激活后是否浮在其它窗口之上+ M1 D$ R( _" M( h' ^- O2 o window.showModalDialog使用手册 * O$ s: Z( o& b/ T' T3 D 基本介绍:# U, d3 H4 @0 g' T, |# w showModalDialog() (IE 4+ 支持), }+ ?+ b/ X3 P, ] L+ }5 m2 ~ showModelessDialog() (IE 5+ 支持) 8 ^: @8 O# @5 V% }% N$ xwindow.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。$ |) X8 m* B, Z) h5 x7 { window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。, Q- }' A$ T# A- {( I5 X % x5 W9 [8 m7 W' E使用方法:6 x2 D' |- ?* x3 i4 u vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) + `; I7 E3 _7 |# p* fvReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures]) ; s& Q5 H# V0 Y; t$ g$ t; p% m $ t1 N5 T8 o+ V; U! P& w8 q参数说明:: q! {+ ^, M4 J& [ sURL--# x, o$ ]. Y. ^4 S 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。; @+ u: _6 z% c* f H; C6 f vArguments-- ( _9 }0 S$ Y5 Y, ?# d3 N1 k可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。, I$ I6 p# y% ^3 G5 I sFeatures-- j- P+ y/ }5 p. x \. A 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。; p8 o$ U" @9 u" I3 n+ Z 1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。 R2 o- j' V# M 2.dialogWidth: 对话框宽度。 % q: l. e+ h+ ?3.dialogLeft: 离屏幕左的距离。 ) W4 V4 N6 N* N7 z5 z4.dialogTop: 离屏幕上的距离。 , E' [" b# Z$ M. G# e! g8 [1 y5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。, P9 n ^& J# L3 B, \ 6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。 ; G) z* b6 @! K; V) s: o) m9 w/ Y7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。# y1 f! u# z- b' M: S3 h9 E 8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 " Y: C2 M% m6 L l/ Q/ o% H9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。8 P5 t3 U0 t' V# x& @' s {* V 下面几个属性是用在HTA中的,在一般的网页中一般不使用。) Z4 ^. D4 g2 [. A' Z3 }1 Z 10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。 1 ~0 z0 X3 f+ t( q- K11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。& }: ]0 Q8 N: { 12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。 $ Z# Q) Z) [7 P8 x" e7 R" y5 n9 C ( J9 _1 {( I0 `% F7 {) {参数传递: & ^$ T. ^/ j+ f. f1 e( e1.要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:9 H* s& S9 J# _1 f7 \! v ------------------------------- 4 b" Q q. `0 |% r4 o# p0 b2 g) y1 ?parent.htm $ b ^& w: X0 u, F7 Y, x% U& R<script>; ]+ c, {; ?8 ~; g: }) s; ] var obj = new Object();0 c9 V% {" M# J9 O9 K3 }) f S obj.name="51js"; * ]& }3 D* b+ }; o" Q! K' b* f* {window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");0 _3 _: u: d7 p7 X( x9 B </script>6 M: b( O' X; j& F$ u5 V/ p modal.htm & P1 H; S: A" G2 r! X<script> - @1 @) Q) K% X6 hvar obj = window.dialogArguments 9 k. {3 Z8 ?, A' s% u5 Ealert("您传递的参数为:" + obj.name)) B P5 D9 K; ?& h6 u5 a </script>. a( [% f! Z9 }8 ~ -------------------------------! n& @2 T2 G! h' I 2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:2 q" G5 m, S- _ ------------------------------/ b; R; A( n7 P0 O) { parent.htm0 X- N2 n1 w. e5 P3 U <script> ! P2 l6 `% Q' L) I4 d. S) a: rstr =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");5 c4 Z! Z5 H8 k; ?0 w alert(str); 8 v! i( D1 Y9 _7 ?( O</script>, m3 R& N; r% q& j# g1 G modal.htm3 G3 M! r' N; Z. z- n, ^: A <script>. ]0 p9 y$ X$ G# S4 U, T1 a window.returnValue="http://www.51js.com"; * z1 M6 k3 u9 C3 i</script>- e c( C, H5 l - h, e) }4 S9 U0 u [em09]
遨海湾-心灵的港湾 www.aosea.com
 楼主| 发表于 2004-9-21 10:46:00 | 显示全部楼层
Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如:

showModalDialog() (IE 4+ 支持)0 m# T/ f5 c/ _0 X   showModelessDialog() (IE 5+ 支持)

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

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

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

使用方法如下:9 x1 m, ?# `) W vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])( n5 P; p- X0 @. v0 A vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])

参数说明: 5 \/ J- Q# P- ]5 }% Q sURL : ~: g& j; P; J' M 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。 3 t1 I3 U# X) Q2 k! @% I vArguments( l& _( }* b* R; L3 N 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 4 G& D* B" Z* F2 `! }' p sFeatures; g7 @) E% n Q7 R# G 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。 ) d) b, M% H4 ~% w/ U8 }: S dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。 7 H9 Y( }+ |; w* @* p) p   dialogWidth: 对话框宽度。% S( Z3 w- I# N- Y! `' ^   dialogLeft: 距离桌面左的距离。, @) d% M% Q/ m% V   dialogTop: 离桌面上的距离。 6 J6 s2 U! }8 E' ^3 f& _% |   center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。, l* e2 H$ L) e2 S* {* z, O0 |   help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。0 k1 n$ ?3 ]4 i2 D" A: f1 S) _" M5 P   resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。 0 [0 t% b$ s( W6 x v   status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 P# z/ K1 J) c scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的,在一般的网页中一般不使用。* I q' s: K8 c5 Y dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。 & c4 v6 E3 q" o' j edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。& v' x3 w5 @3 @- { Q unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

传入参数:) s6 m* {- S k4 Q4 k1 S- c 要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:

test1.htm! t" e# E+ O: T$ w1 n% ^8 } <script>" p* |* _4 c2 R2 p- {% u8 p var mxh1 = new Array("mxh","net_lover","孟子E章"). a7 f5 r8 r, |! e! ?" t- G var mxh2 = window.open("about:blank","window_mxh"), A" Y4 O7 T8 o' W1 z, J // 向对话框传递数组 6 P5 V5 a: {8 w9 I9 ] window.showModalDialog("test2.htm",mxh1)5 X( x* P% u# K# i1 g // 向对话框传递window对象; |% K q7 W1 F J; r- Q window.showModalDialog("test3.htm",mxh2)) j' E, y* Z, X- x0 g- ]9 M </script>test2.htm3 S0 ]4 s* F( h+ }9 Y5 Q5 W1 ] <script> & U0 Q; L. a! r+ K( J' k' ]# | var a = window.dialogArguments - q; O5 w; Y8 N3 F alert("您传递的参数为:" + a) ! z6 i4 c, M8 R; c' b9 d</script> ' K6 C& K3 t; v9 L4 O2 N, f test3.htm, X/ H$ l% W0 K <script> $ p q5 C$ M1 R/ W# q" ` var a = window.dialogArguments ! U) c' _% Q! A! | alert("您传递的参数为window对象,名称:" + a.name) " o) }0 `# h/ y2 y+ q+ b </script>

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

test4.htm ; G* S; o8 @" E<script> " t/ D/ g; o% t9 R/ x1 n var a = window.showModalDialog("test5.htm") 9 S! l" O% H! L; v; b for(i=0;i<a.length;i++) alert(a) ?5 Y) w4 j$ h- q% X z</script>test5.htm ^! `; Q ?/ d" k7 I% C8 w4 l <script>, S6 m0 R- q# H7 g$ D function sendTo() " |9 m% Q$ E2 ^# }0 Z [ { 2 L5 ~" j# A1 [* c' B var a=new Array("a","b") # \! l3 D8 Y: I$ U/ u3 D" a# b' z window.returnValue = a/ L8 G; f6 Z, n6 k$ L- h5 S window.close()" ?% H# O# p, |- W, g } ' _0 \ @$ v+ x r" { </script> 0 w, w% F" b0 N) H) S3 Y <body>4 J$ N( F! w( h( |) ^" Y" Q <form>/ x0 E& D: M* Q; k) `% ? <input value="返回" type=button onclick="sendTo()">+ ]& }6 f+ f! ]! k0 V. z: @# u9 ]1 [ </form>

常见问题: + `) Y& r. P9 g5 N1,如何在模态对话框中进行提交而不新开窗口? 6 ?/ n$ N# V5 s& P4 Y+ [ 如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作。例如:

' j4 o! _- w6 G

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

本版积分规则

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

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

GMT+8, 2026-7-8 08:42

Powered by Discuz! X5.0

© 2001-2026 Discuz! Team.

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