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

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

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

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

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

×
一、window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 6 a) `$ p" F3 y5 S( l" ~8 [5 `0 F7 W6 E& j, \* |% q . N$ Q$ J8 B% a9 L: f" Y 二、基本语法: , B/ D/ F7 ?3 w0 P& pwindow.open(pageURL,name,parameters) # s1 t Y1 a# O0 \; q+ o 其中: ' |3 ~+ ? H/ K0 mpageURL 为子窗口路径 , ~, Q- S$ t, Q7 jname 为子窗口句柄 + ]5 A# U6 y6 y/ t6 kparameters 为窗口参数(各参数用逗号分隔) + Z. b# v* `8 i3 q7 l & P: s9 d) k# [) R . G; @8 Q: I' G* X( W# W9 c. f三、示例:/ n/ `% D8 \6 U2 u# w <SCRIPT> 4 D Y: Z7 {2 r/ [! @<!-- 5 B8 U6 q, G, ~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') # z3 M& P# W" W) E9 V5 c; q) |: c//写成一行 # E, O2 S9 y$ l7 x0 \# n* G --> 9 k% J6 m/ Y- C7 O. v4 h: e' O </SCRIPT> 5 C* P) b1 {+ c4 N) ]1 S6 _& a脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。 % X# R5 W- w+ |: B5 _0 O. P9 v请对照。 & {$ W7 w# n4 o1 H0 \8 h9 N) {6 R! j# v% N1 Z 上例中涉及的为常用的几个参数,除此以外还有很多其他参数,请见四。& ^5 U; g, e4 P' S. Y$ X - @7 y& J- C% T* }; E $ Y. W2 l6 J+ v8 T7 {5 C( g7 y四、各项参数 8 l& k8 R, E8 y. c其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。5 _3 _ o* c9 T- j$ @2 E- F+ c3 D' Z ( K* P' [$ R4 s参数 | 取值范围 | 说明 ( ~ z/ H( y& [& J" Z, B3 u8 X| | ; Y0 a, V. T9 V. o% @alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 1 T) Y; y) P/ g alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 ) A) h0 M- v- N2 e9 M4 Y depended | yes/no | 是否和父窗口同时关闭 + l g' _) \' R) C+ ]2 sdirectories | yes/no | Nav2和3的目录栏是否可见 8 v- U$ y* z# G( H U8 Y) m T4 |height | pixel value | 窗口高度 ! z. D$ p' m4 y$ p9 J0 Ahotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键 6 Y3 f }( R2 m% i! YinnerHeight | pixel value | 窗口中文档的像素高度 6 B$ m1 B5 k. c) Y0 PinnerWidth | pixel value | 窗口中文档的像素宽度 6 N. u/ G( ^4 { location | yes/no | 位置栏是否可见 7 Z$ ~. F/ }; C4 d" z menubar | yes/no | 菜单栏是否可见 " N; f- [+ n) d outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度 + a- Q, _; v/ X9 C' K6 B% CouterWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度 * J7 _& \8 i; L3 M7 s resizable | yes/no | 窗口大小是否可调整 8 ^( m; |: A3 J8 b9 U3 UscreenX | pixel value | 窗口距屏幕左边界的像素长度 & g2 Z+ g( j$ a) j! ascreenY | pixel value | 窗口距屏幕上边界的像素长度 & h9 c$ }' ^3 _) g9 S0 L% \3 bscrollbars | yes/no | 窗口是否可有滚动栏 ) a. e; s' g# d% @+ I( ]9 \titlebar | yes/no | 窗口题目栏是否可见 % h* Q& p: l# Z" ~# h: H. Y/ Ftoolbar | yes/no | 窗口工具栏是否可见 1 c$ B( ]9 d5 {% a e8 B4 o Width | pixel value | 窗口的像素宽度 6 ~) u! Q' o q2 U/ v% ` z-look | yes/no | 窗口被激活后是否浮在其它窗口之上 0 E5 [; u. T6 l/ Bwindow.showModalDialog使用手册; ^$ L j2 i: r. v! M* Z* S 基本介绍:5 k% u: l: |# T2 w' q3 n showModalDialog() (IE 4+ 支持) ! d- |" ^' Z( B% t6 ~- w& WshowModelessDialog() (IE 5+ 支持) 3 c2 d0 e- G @- xwindow.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。! @/ W. M& \0 } F8 T window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。 . s8 S0 v* T. v$ @+ {/ b3 m/ C 9 F! z9 V7 f" `4 F5 a使用方法: Q. v+ _, J+ Y" P: I5 o( PvReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])2 X; ~* h5 o' I0 ~$ N vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])/ k& M$ S; x% w6 v: i3 u * s* C" L: T3 k x' C+ W 参数说明: % e5 I. C0 v1 h, osURL--, K0 [$ j% A8 J 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。 % Z. L5 F( @' E: M9 gvArguments-- + j) F* I; J0 ?" T可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。+ A. f9 K& H# e& c2 w' r+ ?9 { sFeatures-- 9 N8 @( m$ t4 V U可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。 * U; q" b& y0 c! f* d) D- O: V1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。+ H+ H* m [5 p- `+ l6 y1 o. Z 2.dialogWidth: 对话框宽度。1 [% b; ^: A8 K& G) a! n 3.dialogLeft: 离屏幕左的距离。 / x( X* e9 P% `+ A* |4.dialogTop: 离屏幕上的距离。 2 f* l9 A( {. ^4 ^5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。2 C3 i% Z) t- G! A 6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。 % W8 _1 V# I# I4 [% } }( n0 B- ?7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。$ q R+ q; n6 b9 v7 S8 q 8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。( D. B/ c d3 \1 |' k4 v; C, _$ }* P 9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。6 Q$ u# Y- [4 V) G 下面几个属性是用在HTA中的,在一般的网页中一般不使用。 & \! }9 B# A2 T10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。 7 Q6 l6 f* t' v$ r3 F3 t% v11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。" \; e+ {! ~7 M; y* b' G0 \ 12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。' `) I" z* B2 C+ e; G * j/ x8 K; X3 O3 Y/ d& F5 @参数传递: # }4 o* U# r- P+ T4 G9 \& y1.要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:3 u% |' v2 m9 w ------------------------------- 3 b( v. Y9 J- zparent.htm 0 \3 D" D0 N' T8 X) O8 F- z) ?, M<script> & n/ ^4 X( w+ [var obj = new Object();: |* F/ D G. Q9 G& | obj.name="51js"; 8 ?& R* Y, A9 o* J- x+ U- i# j8 U! swindow.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px"); : u. n: s: X1 W% ~9 T</script>) v- t6 i9 R0 `+ X$ E modal.htm6 F5 p3 B; ?) w8 j <script>$ a. y6 u" i, U+ Q. ~0 v, l var obj = window.dialogArguments 4 s2 S* P1 g- r/ u% |! A" E( Yalert("您传递的参数为:" + obj.name)- b% |$ \% [* K% q </script> # f' R' B( k' @* w& n$ N, a; U------------------------------- + D+ M9 p% Y" T7 P1 l: `2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如: 4 y: B( ~8 V1 N0 H: h+ ?------------------------------, H1 f0 ? c3 M/ n parent.htm5 J, W% Z ^# e1 ]( b1 w <script>8 S$ o4 M0 e3 e% O) q8 w' U str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); 6 Q) a- A! V; x$ |, I' balert(str);( I: Q. `- E4 W( E ?0 D$ K </script>% p% r9 r1 b8 T: S7 }, h modal.htm 1 X' O" ?3 q/ c<script> 0 d, w5 Z7 l3 e) k: Z# Fwindow.returnValue="http://www.51js.com";9 t3 r6 d( @/ {, b$ \ </script>2 M( Z h, r' l* _: C- b, f ; }; u6 x0 A# _9 Q[em09]
遨海湾-心灵的港湾 www.aosea.com
 楼主| 发表于 2004-9-21 10:46:00 | 显示全部楼层
Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如:

showModalDialog() (IE 4+ 支持): x3 P7 ]. d3 v$ x' X( g' D$ n   showModelessDialog() (IE 5+ 支持)

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

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

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

使用方法如下:$ z- ~7 B) Q* {# r) H% I0 t+ H. _ vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures]) $ {4 v) j- L, _ X5 {9 v2 L, E vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])

参数说明: ( e0 s) y9 C' H! H7 h2 R sURL& O4 X& B4 ~/ P# F0 p 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。 . ~. Q. I3 k+ I9 ~. J V: t, x vArguments / ]$ L7 U8 G& U5 Q! w 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。1 z- W1 B, [; F+ ~& d: n. S sFeatures $ K0 D4 q, G6 T( z5 f 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。* l/ |( m/ [& ], @# k7 e dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。 $ s7 @/ H S1 @   dialogWidth: 对话框宽度。 6 o7 F1 L) W' }3 `   dialogLeft: 距离桌面左的距离。 . c! _) H. Y5 x   dialogTop: 离桌面上的距离。 % d/ h) z6 h$ l% `5 R% r2 {7 F' S   center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。 5 I3 s6 k0 v$ @' j   help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。, ]* w8 @, t, S, ?   resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。& y: I' a1 O2 X4 \* ?0 f5 N" v, C   status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 1 Y7 T% o' P& N6 C% D scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的,在一般的网页中一般不使用。 * H3 t* }7 I+ u" ~ dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。 + G- c' s- h4 F( a" s8 { edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。 & f* n$ c8 q8 B) x5 X unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

传入参数:5 w# t' w7 ?2 D/ @5 N 要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:

test1.htm + C7 W" M% Z6 s# H- J<script> * [/ Z+ f& |; C9 C8 _. w var mxh1 = new Array("mxh","net_lover","孟子E章")6 L9 i1 |0 M2 Z4 C var mxh2 = window.open("about:blank","window_mxh") |4 U: {" V. c' O) T6 R; L // 向对话框传递数组 0 Q7 D' G) X* X window.showModalDialog("test2.htm",mxh1) 6 f! }8 i4 U, j1 Z" d a // 向对话框传递window对象3 r; p) B- t4 G t window.showModalDialog("test3.htm",mxh2)" [ T) N( Y0 A, u </script>test2.htm1 ? K0 J4 o4 D1 `9 V" i <script> . v T' z t4 q: C2 ^: y' k, v var a = window.dialogArguments5 M4 u& r3 f' Y( N+ _) f8 k alert("您传递的参数为:" + a) 0 A) v5 S1 }5 o% ]" Y3 Y</script> ]8 b0 D. I, T% c; I. j$ i% dtest3.htm 0 p0 g, ?/ C! R, b7 y8 r<script>' z" f: `6 E9 ^9 O5 f- Q var a = window.dialogArguments 8 l+ M% A9 a' Z alert("您传递的参数为window对象,名称:" + a.name) + b, [# R! E0 ]6 m$ z7 w </script>

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

test4.htm & w8 |5 n- N5 N% I2 [" I<script> 5 u5 |3 n! i S A2 a var a = window.showModalDialog("test5.htm") + d) ]0 j# R: E1 ?: W" l5 m- u for(i=0;i<a.length;i++) alert(a); Z/ |5 Y5 e8 e$ c0 d ~# l </script>test5.htm # D& y$ e* V2 ^6 f+ B2 |% i <script>, F$ v" |. |5 F) L$ k5 Z$ E function sendTo() ( R; x) }4 W, l/ M: Z {) o' r9 Q7 A% J# y0 Y$ y var a=new Array("a","b") ; D2 _- ~8 b/ x+ r$ j window.returnValue = a! ?" V$ {5 E7 C* g/ y% p window.close()6 g3 a( c, ]: F/ z: S9 T9 i }3 E9 |9 V3 N9 w6 X4 } </script> * D+ p$ k$ b( f; Z% [9 n3 [9 A! ? <body> 0 g& X" D2 e" S6 @$ c" m, F <form> : u) L# v$ c# N0 ?. a% N <input value="返回" type=button onclick="sendTo()">9 i, n7 T# b" ] </form>

常见问题:2 U8 G' r/ T0 H: q1 g6 g 1,如何在模态对话框中进行提交而不新开窗口? ( _2 w* y9 O: k6 X: u 如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作。例如:

, O5 S2 d/ W; c! s5 N

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

本版积分规则

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

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

GMT+8, 2025-5-15 09:40

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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