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

熹

一、window.open()支持环境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 4 m) j) {9 ?1 e5 z二、基本语法： ! n" D8 \4 Q4 N0 x' C( }window.open(pageURL,name,parameters) - {+ n7 ?/ m3 r其中： pageURL 为子窗口路径 - h6 y) R5 g3 l d1 B, sname 为子窗口句柄 5 K3 L; ~6 o# g4 S& ~$ M3 Oparameters 为窗口参数(各参数用逗号分隔) . f) d; t y5 R9 [. U- k% W x 三、示例： <SCRIPT> : q0 o# s. h& H/ k# W, N 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') //写成一行 - O J, }: ]+ n# F) a8 U6 {--> 4 C% ]$ ~, \7 E</SCRIPT> 脚本运行后，page.html将在新窗体newwindow中打开，宽为100，高为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏。 请对照。 上例中涉及的为常用的几个参数，除此以外还有很多其他参数，请见四。 四、各项参数 其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。 参数 | 取值范围 | 说明 # f8 D' H/ m9 O6 o| | alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 , U5 b4 }" w x6 A$ F; Z! Ldepended | yes/no | 是否和父窗口同时关闭 ' z7 G7 }# v7 s% U- |+ udirectories | yes/no | Nav2和3的目录栏是否可见 8 o. G: ?, q, S% w& n6 S: v9 B) A c! Theight | pixel value | 窗口高度 hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键 innerHeight | pixel value | 窗口中文档的像素高度 ' K$ x5 \' a8 i! Z$ NinnerWidth | pixel value | 窗口中文档的像素宽度 + J1 Q4 ~+ p: t. m; M( ?$ B0 q6 @: ilocation | yes/no | 位置栏是否可见 - {- k- D2 |/ R/ H7 m' C' Kmenubar | yes/no | 菜单栏是否可见 outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度 outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度 resizable | yes/no | 窗口大小是否可调整 screenX | pixel value | 窗口距屏幕左边界的像素长度 : q, ^1 {, {" ]4 u- N" M( D" HscreenY | pixel value | 窗口距屏幕上边界的像素长度 ; F/ z, K- w# _4 L" @scrollbars | yes/no | 窗口是否可有滚动栏 9 v9 ^- W# C+ T3 Y- ]2 ^: p2 Vtitlebar | yes/no | 窗口题目栏是否可见 9 @9 I5 J0 }- itoolbar | yes/no | 窗口工具栏是否可见 . T! ]" K4 K) d* r, EWidth | pixel value | 窗口的像素宽度 z-look | yes/no | 窗口被激活后是否浮在其它窗口之上 window.showModalDialog使用手册 基本介绍： showModalDialog() (IE 4+ 支持) 0 v0 \: U/ E) g! D5 U2 ^ [9 zshowModelessDialog() (IE 5+ 支持) e- \$ z' [1 Y# V8 p5 |$ B# a9 h& iwindow.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 ' d' V, J* A0 vwindow.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。 使用方法： ' u* T" v5 n" E# a! I4 |vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures]) 5 |% |" F) B8 n4 l" Y 参数说明： sURL-- 必选参数，类型：字符串。用来指定对话框要显示的文档的URL。 vArguments-- 可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 sFeatures-- 可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。 1.dialogHeight :对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。 2.dialogWidth: 对话框宽度。 # p! u4 `1 ^5 J# N E! N3.dialogLeft: 离屏幕左的距离。 5 n- x3 C. W& E% x7 P4.dialogTop: 离屏幕上的距离。 % v9 X% i5 }2 F6 x! L5.center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。 4 Z T. N+ r2 y& x. x7 A6.help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。 2 C2 \- i1 l `* k5 ?8 Y7.resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。 1 \9 m5 p+ d6 w; s6 Y# V7 z8.status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 , {% N% b' T! b4 f5 q& Q9.scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。 4 o- X( }& u. o6 K% O8 ?* [1 a9 E下面几个属性是用在HTA中的，在一般的网页中一般不使用。 10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。 " l$ f" G" W; R% I$ N11.edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。 3 w# H n( n2 x' `# y: t12.unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。 ; E, ~7 \2 `+ G* `1 k, W% o" O参数传递： ) m% ?6 r, A& r4 X, ^- X1.要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如： & `' s5 f0 |8 ^2 O------------------------------- F X6 _7 H/ [; }; zparent.htm ; D* \7 B0 _5 }9 e% h' n<script> var obj = new Object(); " {2 p6 G" h$ @, K. @/ Wobj.name="51js"; ' l) w& m" @2 c$ @+ @( n9 G9 Ywindow.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px"); " p# F, _- U |- V7 U</script> modal.htm <script> 2 r# M5 D. _2 f2 ~7 x9 x) Bvar obj = window.dialogArguments alert("您传递的参数为：" + obj.name) : _" ^/ \, b* m</script> ------------------------------- 2.可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如： , @, G$ d* E% s7 b+ @. |------------------------------ 5 s! ^4 l# j. U/ Zparent.htm <script> ( P3 d2 X! r& g, d( u' {8 _, ~str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); + e% c1 P. x8 j9 t$ R, g: s. V0 calert(str); 4 m3 D; \) L' J5 w8 R+ \+ H n: a</script> modal.htm 0 F' M$ [+ i6 Q<script> & p$ S# Q X: I" _9 ~: k( z! m7 zwindow.returnValue="http://www.51js.com"; </script> 4 M7 O6 N3 R- { ` [em09]

熹

Javascript有许多内建的方法来产生对话框，如：window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如：

showModalDialog() (IE 4+ 支持) 　 showModelessDialog() (IE 5+ 支持)

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

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

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

使用方法如下： vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures]) / C- e D. o! W vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])

参数说明： 1 |& R* F5 Q1 P3 @9 e0 V6 a sURL 必选参数，类型：字符串。用来指定对话框要显示的文档的URL。 vArguments j3 s1 z1 b$ r! Z 可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 / A; C1 ^+ z# Y4 @% f$ R sFeatures 可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。 8 ^$ J3 e& y' q: z8 | dialogHeight 对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。 : ]. ?' h0 b& R) _! p; [ 　 dialogWidth: 对话框宽度。 　 dialogLeft: 距离桌面左的距离。 　 dialogTop: 离桌面上的距离。 4 u% d q& H8 j; a5 s* v 　 center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。 9 ^7 D- t) F5 L' g$ [4 H! w1 { 　 help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。 ) c' A8 z5 s4 W& {, O 　 resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。 　 status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的，在一般的网页中一般不使用。 dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。 edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。 unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

传入参数： & i+ g/ f1 `, {7 a; d" e3 h" } 要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：

test1.htm <script> ' I" ?' R, w) [1 B7 k0 ^ var mxh1 = new Array("mxh","net_lover","孟子E章") var mxh2 = window.open("about:blank","window_mxh") // 向对话框传递数组 window.showModalDialog("test2.htm",mxh1) // 向对话框传递window对象 window.showModalDialog("test3.htm",mxh2) </script>test2.htm * v" J, V, \6 M" P<script> var a = window.dialogArguments & G( f5 V0 ^3 O) o7 D8 ~ alert("您传递的参数为：" + a) : f! R* k3 S# u. f Q</script> test3.htm ) j, Y3 N8 _# Q- E4 L<script> " g5 n+ b5 G/ t: D: I% q var a = window.dialogArguments alert("您传递的参数为window对象，名称：" + a.name) . I$ P3 f( W' M3 z: S </script>

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

test4.htm <script> var a = window.showModalDialog("test5.htm") ' @+ X! t2 n0 o- L9 ^! i for(i=0;i<a.length;i++) alert(a) </script>test5.htm <script> function sendTo() ) U! Z7 X, B- U { 8 K) z a8 C- \; O* c b( l var a=new Array("a","b") window.returnValue = a 0 {/ G9 d' I5 _+ ~ window.close() 9 s0 F" O( l4 \7 Q } </script> <body> & [1 t* ?% H* C6 s* j7 |& `8 k <form> f/ J W# K2 C$ r <input value="返回" type=button onclick="sendTo()"> </form>

常见问题： 1，如何在模态对话框中进行提交而不新开窗口？ 1 p6 q) H- j, X0 }3 w3 i: {& ^- d- w 如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe，提交时可以制定target为该iframe的name。对于IE4+，你可以用高度为0的frame来作。例如：

, p' S3 }0 c6 C, q/ }, F; x: }