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

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

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

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

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

×
一、window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ }8 q/ S3 l; r- B- `: S. I + C" X) H7 ~2 E/ W) e _& ` x* }3 q$ \ o* y! `1 L+ n二、基本语法: 4 g' l9 H3 }+ cwindow.open(pageURL,name,parameters) * ^' D% y% j7 y+ U其中: 6 x6 x* X. s( y: f( l0 @& b$ e0 o5 bpageURL 为子窗口路径 ! {. I) T8 v3 B/ ^ name 为子窗口句柄 ) ?8 Y4 @$ F- x- q1 \# v parameters 为窗口参数(各参数用逗号分隔) * A: q4 Q" z9 Z5 f! z 1 B5 u7 X( S6 C& g ; F$ M# z8 U% P- r9 o0 V 三、示例: / g+ l) m; H2 @& e<SCRIPT> 7 w9 I# t; v0 h+ q<!-- . `! }0 j4 t0 O$ V8 w 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') $ Z7 f* D; h. p$ ^//写成一行 6 o M. ] U+ P --> $ O) u" X" w+ n </SCRIPT>& l9 F: ?1 V" f1 w8 V- f 脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。 0 p- E0 n7 U. Q3 h" k请对照。% j/ X- Q; f; s , Q: C+ x: i* J4 W( i上例中涉及的为常用的几个参数,除此以外还有很多其他参数,请见四。! H: `% m, a9 o i6 } \+ e7 J" k6 ] . x- [9 o: A8 I9 U0 G四、各项参数 6 f" Z' @! Y/ a: z; C0 P其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。 " ~! R9 B* |- \2 Q7 l- j7 { $ t& k+ E- p; w5 {5 N参数 | 取值范围 | 说明 : @* i' m7 c% k3 H- z- P! c2 `9 P | | . T$ B. ?# ]" ^2 X/ @+ D$ HalwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 0 K2 D; N- Q3 a+ k3 p3 Z; v6 ^alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 & y# `- W, C7 N* l' L0 y+ P depended | yes/no | 是否和父窗口同时关闭 ) g& M" |! I* E4 x, @1 z$ Q$ ?directories | yes/no | Nav2和3的目录栏是否可见 4 b2 j% m1 D- G) F# W( X7 Pheight | pixel value | 窗口高度 " {) g) {. }) V$ g" W/ rhotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键 ; t9 `" ]( `, h3 `* g- GinnerHeight | pixel value | 窗口中文档的像素高度 ! ?% \1 m' |6 b% K4 N4 T+ ginnerWidth | pixel value | 窗口中文档的像素宽度 0 Y2 w- w9 O' N. \; F2 z4 L location | yes/no | 位置栏是否可见 % ~8 \% V: G' ?7 j9 Y2 M: amenubar | yes/no | 菜单栏是否可见 / ?" S/ J j7 M' z outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度 % A0 V- T. [) \5 r1 r: J' J outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度 ) M( s' o. m e6 @- ~0 J: \resizable | yes/no | 窗口大小是否可调整 . C5 O8 ^! X& w4 h% l# o screenX | pixel value | 窗口距屏幕左边界的像素长度 $ F, I" i& T. y! y screenY | pixel value | 窗口距屏幕上边界的像素长度 + o S, P _/ u2 b G5 rscrollbars | yes/no | 窗口是否可有滚动栏 0 B& h" J$ I% @; V titlebar | yes/no | 窗口题目栏是否可见 . C3 n8 A( {) _- d( J4 u+ k toolbar | yes/no | 窗口工具栏是否可见 ' l7 F- r) U" M S' Z* [) M5 F Width | pixel value | 窗口的像素宽度 4 ] r6 b7 D+ B R. W* x6 h/ F z-look | yes/no | 窗口被激活后是否浮在其它窗口之上 , I9 Q+ e7 D/ B) f8 L8 e4 ^window.showModalDialog使用手册) a) I" L$ a- O8 I( H; [ L 基本介绍: + ]7 L/ m( L7 E5 k, x% zshowModalDialog() (IE 4+ 支持)9 q" a/ _7 \( [& V2 r# p& B showModelessDialog() (IE 5+ 支持)4 F T$ \% T/ C# e( { window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 8 i. i% v9 u) ^) J* twindow.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。, N. z2 Y- Q) ~- l7 w% a 0 U; d6 K" q! M# o 使用方法: 9 S) p$ ]: f6 B! T& f- Y9 M1 ZvReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) 6 `4 w9 D. x2 y0 j1 dvReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures]) 2 x; ^; a9 `( M# z* b" A3 j- \- d / ]% B- {7 z) b参数说明: 6 L/ x# c. r' H1 EsURL-- 0 m% y- S3 X( U必选参数,类型:字符串。用来指定对话框要显示的文档的URL。% Q. s9 O+ Z6 i vArguments-- / I& f1 @8 Z# `( X; P1 N$ N可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。# r1 D* g. A2 b* T* z5 V sFeatures--1 K. G! | t; p' H! e 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。$ k/ p) I8 q, M" H# d: I! A" H- E E 1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。# H- U: A; J2 M" O 2.dialogWidth: 对话框宽度。 ) x. z# I! H% j3 U) Y3.dialogLeft: 离屏幕左的距离。 ! H7 b5 `# c6 a: Y9 e7 s4.dialogTop: 离屏幕上的距离。* ^; {$ q. I; T G2 N% Q 5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。7 ^$ V) I) L6 {4 X$ E9 o1 T 6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。; ]* O/ F+ V9 e' u# ? 7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。 , ]8 P5 i6 f4 D) x# X" J8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。- p4 n* g/ w- z* X9 `2 E C 9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。" U: [0 V# n) f( A' } 下面几个属性是用在HTA中的,在一般的网页中一般不使用。 . k$ q; n x6 A+ c) h10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。 c9 Q0 B( y2 o7 b5 h11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。 1 Z2 D4 q, M/ y" q0 M12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。 * a7 ]$ e- C9 s, y - x# z9 O3 b9 f# k" C参数传递: m: @! ~) r& n# v3 |4 b) y1.要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:( s- F0 ]4 J0 h+ i, p ------------------------------- - l2 m* L4 u- V0 ]parent.htm( `$ g7 _) i' q/ P <script>: p9 j% }, I7 O% @5 q8 S var obj = new Object();+ I8 r) |0 a! Z1 K9 t8 d5 T' R obj.name="51js";5 @8 d, @# m7 r) G- p window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");* L% D1 T( b. B* j! G8 T, { T </script>. h( K: E4 A4 Y4 Q modal.htm8 f% Z9 y: o$ Z- f5 J0 \ <script>3 f/ {, ? h `* x+ i var obj = window.dialogArguments4 ]5 A2 `" U: w# n* d alert("您传递的参数为:" + obj.name) " X4 D6 t5 L% P</script>4 _7 L0 X1 v2 J' F8 [ ------------------------------- & Z9 M6 H8 q+ h5 a% J6 \2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如: ' p3 q; u6 X+ N0 f------------------------------ " g( ]2 N" g' A: iparent.htm- n# ~9 |% b/ ^# T <script>6 s! c) U' G9 }* Z1 a- {' u: W9 C str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); 9 x8 x5 [! k$ ~# B( F4 n5 valert(str); . h, M1 u: ]! P</script> / y+ h2 l% K/ Q. }1 N; u# Hmodal.htm * g/ v8 Z7 c( v0 B3 t<script>+ i+ X* E* z0 q$ H7 [ window.returnValue="http://www.51js.com"; - u% g v: Z1 w0 A1 o</script>' Q* J e$ D. B x, f! u8 w : |' t' R0 x1 H7 S! r7 ^6 h [em09]
遨海湾-心灵的港湾 www.aosea.com
 楼主| 发表于 2004-9-21 10:46:00 | 显示全部楼层
Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如:

showModalDialog() (IE 4+ 支持) 1 o/ X2 U: s: b4 C/ h  showModelessDialog() (IE 5+ 支持)

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

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

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

使用方法如下: # c8 E. ]) o& _" O# E& Q# g* d vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures]) - D: R$ u7 y" \2 d6 j2 Q' B vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])

参数说明:# \# R, A2 t$ D8 k/ y0 }/ g9 ] sURL/ \4 B; H) L8 q$ Z" u/ ~ 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。" v' ?' S) y: D vArguments' g9 M3 K9 C5 e. m+ Y 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 / k1 W8 B3 u1 x: K! Z. T sFeatures6 a. r3 h) n) i2 l9 ]3 M4 R4 { 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。 3 ?' T: }6 Q4 c$ Y dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。8 p6 H0 G: i2 |, h0 T/ L   dialogWidth: 对话框宽度。 7 I) v# V1 V. Z3 H4 T6 R   dialogLeft: 距离桌面左的距离。 k( n: M4 ~: m" J9 f& L: v3 M   dialogTop: 离桌面上的距离。. i! e0 c: g, g. ^# j; F. P   center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。! N/ L2 D8 T5 d, H& C x" E   help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。/ \$ q* d# A3 j8 \   resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。1 l& L2 O. x' Y4 U   status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。$ Z1 t6 p; s' W scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的,在一般的网页中一般不使用。 % _; ?/ T' V2 l; E- m$ q dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。 6 G- n: _" X% ~% k! W edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。 # y* A) J4 ^, g$ R. J( _ unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

传入参数: 3 y: a, H4 C4 p; o" o- @7 N d9 K 要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:

test1.htm# |3 `3 ]* R5 \1 w* H u( w* t <script> 7 j) H/ w7 i& `/ z5 M9 Q var mxh1 = new Array("mxh","net_lover","孟子E章") 6 Y" L/ _1 r* x! T3 } var mxh2 = window.open("about:blank","window_mxh") * X! h- X% a' F! z& f$ h // 向对话框传递数组 8 f( O8 L# r, V3 E$ X0 C window.showModalDialog("test2.htm",mxh1) 0 l+ v- T C/ N. @8 B$ { // 向对话框传递window对象3 P- ]8 r$ j1 t8 Y; X1 ? window.showModalDialog("test3.htm",mxh2)7 o9 \* E" w4 J: g6 @' y+ c </script>test2.htm1 e! x+ S& l" O( j- Q v5 W <script> ' ~1 w! w# ~+ S+ [5 n* j var a = window.dialogArguments. w) s5 G, A v! ? alert("您传递的参数为:" + a)3 t$ O" R; H7 c5 e' _6 c </script> & i- N, H, j4 J5 B/ }test3.htm* V/ n2 L" M3 _+ S1 ^* d4 H" h1 T <script> 9 C+ ?8 t5 s: f8 o+ G& N( c! i var a = window.dialogArguments- I# Q9 h* B! l" s6 k0 J/ m alert("您传递的参数为window对象,名称:" + a.name)2 h7 S7 n- b9 T, [ </script>

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

test4.htm - H# B. i( ^- ?<script> , J- ]- C( w4 w! E+ e var a = window.showModalDialog("test5.htm")% V7 U0 m5 v# x9 ?, e3 j for(i=0;i<a.length;i++) alert(a)5 O1 j3 o m" D& Z0 z </script>test5.htm$ ]! C& N) Z/ ?# U ]5 I- w <script>2 W- M0 b1 w3 v, F function sendTo() # P# y; u; k3 s: I" h6 O( j8 P { t! S K+ u- { var a=new Array("a","b") + y B! B- R7 L( L w window.returnValue = a; V N7 i5 C; i window.close()" B: O* g+ C8 x } 5 K) x. _) W+ m8 N5 h </script>8 P' Y* }; Q% L& x/ j/ x0 W0 q <body> 1 ~% L3 K3 z) P <form> 9 O' Q+ m" J: y <input value="返回" type=button onclick="sendTo()"> 0 y- D" S, V" x </form>

常见问题:4 H4 a z A9 ]1 E$ D 1,如何在模态对话框中进行提交而不新开窗口?1 i6 B* T: I& ^" `/ ~ 如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作。例如:

* R( \* N4 M* c% T5 ] ~; W/ n

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

本版积分规则

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

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

GMT+8, 2025-1-30 06:35

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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