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

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

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

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

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

×
一、window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+% I0 ]3 C: }& B9 f3 n; _* \7 Q* ] ( M9 L# e$ ` B8 w7 _: j9 N/ V* q. K- G" B5 r7 ~/ ~ 二、基本语法:* l6 B" } i( F( p4 p: N$ U9 I window.open(pageURL,name,parameters) ( v% u! b/ N' P5 U$ ^* [* \( ?其中:& |5 t2 a3 g; F( c# h1 u pageURL 为子窗口路径 & b0 D, y4 u$ S; [/ u L1 K name 为子窗口句柄 1 } w6 i$ t* k- Rparameters 为窗口参数(各参数用逗号分隔) 0 Z& K# c" L$ O3 A# r. A6 X% O6 H, z/ j( s* |3 @: v / _! o+ }% B: `/ K: s) q 三、示例:6 @4 G( j T. d7 \ m" {$ v, p <SCRIPT> 1 p4 ?. F2 I, M: C+ c4 m7 y# F! f<!-- ' M4 x- W! R! 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') & D' O1 g2 Q1 N, U# b2 Q //写成一行 + k7 X4 x8 p0 n, k8 A --> , J& Q! O( z# Z2 K1 e1 \, S3 K8 T8 |</SCRIPT> # {& |1 s7 ?* b. l脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。 2 J$ v: n$ [7 ]! U# }请对照。 9 M$ q& m. N5 ?3 j" c: _) f! m9 T. R/ D0 a& O1 R4 l% o' k 上例中涉及的为常用的几个参数,除此以外还有很多其他参数,请见四。, A3 |5 K( P0 U: L - f3 ]) ^4 m- v1 Z) V 7 o% Q2 x- J. g* m% f 四、各项参数0 x# g7 h$ g2 Z9 R5 R) I7 K+ A5 a 其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。, Q: m2 M7 ?' q5 ]) H* T, ~ ( J. r! v. ?$ l0 q9 ^参数 | 取值范围 | 说明 : f& V) j$ g1 G j Z| | * z" S0 ~& G) i9 s+ f" x5 | alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 7 E* {; Z A( `5 A alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 ; ]! m% G2 H8 o5 L+ e, @1 Kdepended | yes/no | 是否和父窗口同时关闭 ; M% ^: h' s* |) p: _ directories | yes/no | Nav2和3的目录栏是否可见 N5 k+ H" l9 e height | pixel value | 窗口高度 $ z/ y7 l; }$ P; w5 D. Z hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键 5 v) N9 N, b! \3 t t8 i3 HinnerHeight | pixel value | 窗口中文档的像素高度 - W9 Y* H2 H" n innerWidth | pixel value | 窗口中文档的像素宽度 7 Q2 H) ^" M5 H5 ]location | yes/no | 位置栏是否可见 6 @7 X( d& q, M$ E! L3 zmenubar | yes/no | 菜单栏是否可见 ( T& f6 q9 T, J! N3 j% C! d2 gouterHeight | pixel value | 设定窗口(包括装饰边框)的像素高度 ; L1 J! ]8 Z. Q, uouterWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度 " ~3 w2 T0 c1 r# {& b' I5 Presizable | yes/no | 窗口大小是否可调整 ' M& W# K% S X E9 a0 Y T screenX | pixel value | 窗口距屏幕左边界的像素长度 5 v7 a1 H7 z+ i$ _screenY | pixel value | 窗口距屏幕上边界的像素长度 ! H2 N- g& k. f9 U+ L; Oscrollbars | yes/no | 窗口是否可有滚动栏 . q* S% X/ y1 D# y2 w- P titlebar | yes/no | 窗口题目栏是否可见 + [1 _- K U! u0 [3 Q toolbar | yes/no | 窗口工具栏是否可见 ! Q" f, o9 s; H `: @) I( g$ k5 ZWidth | pixel value | 窗口的像素宽度 1 n T, C! O! \2 b3 }: J4 [: b4 nz-look | yes/no | 窗口被激活后是否浮在其它窗口之上5 k) t" k' [: w- l' { window.showModalDialog使用手册# e2 H4 W0 p; @! g' k) q 基本介绍: ! ?+ J6 Y h, d/ a# h SshowModalDialog() (IE 4+ 支持) ( ?8 k2 p, G6 O1 D6 v xshowModelessDialog() (IE 5+ 支持) B. ~; _* B7 `2 g1 q/ G6 c3 B window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。* j5 t) F& `% j0 G7 u( p: p window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。 # ~8 W" y1 Y5 ]& K0 h7 \* N% R! B3 p |+ k6 d" M- D" J 使用方法: ; \. {8 A7 G; L2 W. V# h$ h7 WvReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]): `" S9 u( n& W* { vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])# W: K9 X" f+ O+ V2 ~8 f! b . k; A- R4 i a, K0 n 参数说明: ; ]# E& u5 o. N1 e9 |+ LsURL--' l+ q' Y4 [2 } 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。! E( B) C# E- a; H! x$ l2 f vArguments-- - r: K/ O# l! K+ v% x可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 3 t$ }; R5 h9 D! Q- B! d* EsFeatures-- z7 }! ^" n1 S 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。 4 ~' l6 R C% I; u1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。 9 U# ?: e7 @$ V' ?2.dialogWidth: 对话框宽度。 0 u0 {( r+ F q1 R+ T/ p( U3.dialogLeft: 离屏幕左的距离。5 O$ g: f4 }+ F3 k' D R" X 4.dialogTop: 离屏幕上的距离。 1 Y V, _7 B1 j, a' i5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。) L5 @/ u( y& {7 m1 e2 E 6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。) n9 n5 p3 _+ {$ y 7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。 ' D8 _) n( |: i9 C8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 - j- k8 U( m! m9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。 8 V; }& O5 W" w# F6 R# B, i0 H下面几个属性是用在HTA中的,在一般的网页中一般不使用。 6 ^. R7 l& T" G$ H) J10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。 1 F @- q3 d. r1 s: m11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。7 {+ z5 B1 ~( c0 s/ p9 F% y3 m2 G 12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。, P1 u8 k% G& Q( |7 K! P8 K3 { 6 ^1 R2 E2 G, ~0 M% a 参数传递: 2 e$ @; Z- Q6 P% s6 T1.要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如: & A5 }2 S0 O. ^% @1 O( Z: C& y-------------------------------/ y& x' a7 a/ p3 z' @+ ~. g1 T parent.htm , ?8 i# l5 p$ h1 S) b' V1 B<script>% a% {3 \" h$ F" d var obj = new Object(); U* {9 D& _' ~5 G obj.name="51js"; ! y& f1 _6 H; l+ X* g# U- ^window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px"); 4 v0 d) r1 j+ T5 K# l</script> - c+ g0 j3 p: ^modal.htm6 n! C8 r5 i/ s7 j <script> H* _' _8 t' |% Z7 c var obj = window.dialogArguments 8 x& r' D1 v! r) ]1 e" Salert("您传递的参数为:" + obj.name)# f) v, T, v) M$ p- l0 E/ `5 M </script>: E" S, @# {" E1 h3 M1 F9 U. j -------------------------------$ m# |! D# O! ^7 s( H6 K0 C" f 2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如: ( ~1 N E) e1 T7 V& h------------------------------ 1 t- @7 P- @8 Q2 q' H3 P" xparent.htm- N3 |9 ~, ]. t, p <script> D6 }3 [ ^/ h: z7 W4 Vstr =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); : j& e* [. J$ S3 q0 Jalert(str);; Y) D9 K4 u0 p+ k: r( ^ </script> ( X T/ d$ |, k4 B1 Imodal.htm. j- _/ l/ k' {: b- i; S <script> : Z% }, f+ m4 G) s$ qwindow.returnValue="http://www.51js.com"; 2 c4 {" Z. T* c Z$ L1 A( V" I! T5 |</script> ; E/ m% Y0 M" t ) ^# C- h: v' A8 a+ \& O( J[em09]
遨海湾-心灵的港湾 www.aosea.com
 楼主| 发表于 2004-9-21 10:46:00 | 显示全部楼层
Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如:

showModalDialog() (IE 4+ 支持) 5 A- u, f: D1 X/ d  showModelessDialog() (IE 5+ 支持)

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

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

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

使用方法如下: 7 V( J" v# u$ o D: C7 ]( k/ B6 d1 z vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])! b/ W+ `4 E$ D; H* z4 Q) Z vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])

参数说明: & p' y% J. a/ n. R3 t4 f. N sURL % b B0 R7 q0 [% D5 c( t7 X 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。 , b3 \: y# C% Y% }$ F vArguments % d1 Z6 W# j9 P 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 1 Z4 U, |* A! d& L sFeatures8 M6 U7 [$ z/ n8 w, B 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。0 d( d' o: \: P2 ]7 d# K7 N3 G# ]- U dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。9 p W2 P) R# `2 K/ g; Y   dialogWidth: 对话框宽度。 8 d3 w+ ~ e7 R6 B5 J5 ?/ e   dialogLeft: 距离桌面左的距离。 9 C9 Q3 R* z- @+ j   dialogTop: 离桌面上的距离。' ~. ~0 u+ J1 Z: }; j& V0 d   center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。/ k: r5 j. ?9 K1 [$ R2 c   help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。 6 W9 J- c1 \' ~) C; ?   resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。 ; B) P1 y) C1 F0 ~! I   status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 3 U, S' T$ j5 [) O. M& p scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的,在一般的网页中一般不使用。 & ]% w% m2 @+ p5 B dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。 ( b5 E& A6 X) y5 F' n edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。 : ?0 Y$ l- H) I; `) M" {) @! Z; t8 [ unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

传入参数: 4 T6 @6 b: Q% K7 J( Y 要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:

test1.htm 4 Q. k3 k9 G$ O! y; `2 v<script> ( B* V9 b2 N* b$ E* ~ var mxh1 = new Array("mxh","net_lover","孟子E章") e' S% p, `+ b* S- L$ i var mxh2 = window.open("about:blank","window_mxh")8 x4 z- [1 c" j* A // 向对话框传递数组8 v) |' u7 b; d0 I) h% S3 X: q window.showModalDialog("test2.htm",mxh1) 4 u3 H. ~( A+ h6 S // 向对话框传递window对象. D9 d/ t: j" y# L% m- ` window.showModalDialog("test3.htm",mxh2)) g2 a- @; G9 v. A7 U </script>test2.htm% E% a/ h9 k# f6 Q( b <script>8 s4 K8 U% r% X2 a var a = window.dialogArguments# D( O z: r2 O' L. L _4 }' z alert("您传递的参数为:" + a) 6 y! l* [7 Y0 ` U</script> 5 Y8 v6 q" [" N |, Z test3.htm . g5 k9 s# j: l9 n, @! V. G<script> U+ |- s. b5 N" g) `' j6 h var a = window.dialogArguments . P9 a7 S8 n6 ?. a alert("您传递的参数为window对象,名称:" + a.name)2 ~2 e3 `0 d: ^# @ </script>

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

test4.htm2 P& |9 W( w* ]% X" t <script> / S; n% S; R8 L4 l% j4 s: H7 x var a = window.showModalDialog("test5.htm") - b P2 t$ O+ x8 M, b7 T7 U for(i=0;i<a.length;i++) alert(a)! b9 I5 \( W0 I/ r, R </script>test5.htm 0 t7 C% x( e1 a/ F9 @+ n/ d2 ~/ m <script>4 |' n7 }3 n1 ]6 B5 i+ Q function sendTo()/ F; F ]3 T, Q1 D { " j( @7 g& j S6 `; J) V* u/ s5 Y, E var a=new Array("a","b")* m( u1 p* f! o. d5 x window.returnValue = a 1 {/ r p" O7 z+ ^- b window.close(); n3 D) f' L0 S6 P7 w( }( L } / U2 f+ r" P; _; S; y </script>! O- H7 ?$ K! X# X C <body> 7 C: i* p5 y) s+ T$ } <form> 1 N4 h$ k. o8 t% r6 L6 t# n <input value="返回" type=button onclick="sendTo()">7 X) f7 j0 C% I0 r9 B' n3 m" y+ I </form>

常见问题:. q0 c& m& M& t& M 1,如何在模态对话框中进行提交而不新开窗口? |9 \, W* H8 k 如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作。例如:

: x' Q: _% l5 B- ]) M

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

本版积分规则

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

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

GMT+8, 2025-4-4 08:49

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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