浅析js中的showModalDialog的实战应用

IE提供的showModalDialog()方法是一个很好用的Web应用功能，虽然一般的网站应用不是很常见，但一旦涉及到企业应用级的Web开发则就很有用了。现在我用一个简单易懂的例子来说明一下：

这一应用需要两个web文件：

1、父窗口（也即用来控制弹出窗口的那个页面）
showModalDialog.html
---------------------------------------------------------------------------------------

 

< html >
< head >
< title > showModalDialog </ title >
< script  language ="JavaScript" >
<!--
// aInfo作为数组对象，将被showModalDialog传递出去
// 也可用var oMyobject=new Object();
// oMyobject.firstProperty = value; oMyobject.lastProperty = value;的方式定义一个对象（firstProperty,lastProperty是自己按需定义的对象属性，可是任意取名并赋值）
var  aInfo    =   new  Array( 3 );
aInfo[ 0 ]  =   " aaaaaaaaaaa " ;
aInfo[ 1 ]  =   " bbbbbbbbbbb " ;
aInfo[ 2 ]  =   " ccccccccccc " ;
var  url  =   " dialog.html " ;
var  sFeatures  =   " dialogWidth=500px;dialogHeight=500px;dialogLeft=0;dialogTop=0; " ;
/* sFeatures的各项可选参数:
*dialogWidth:弹出窗口的宽度；
*dialogHeight:弹出窗口的高度；
*dialogLeft:弹出窗口的左边距
*dialogTop:
*edge:sunken | raised
*center: yes|no|1|0|on|off
*dialogHide: yes|no|1|0|on|off
*help: yes|no|1|0|on|off
*resizable: yes|no|1|0|on|off
*scroll: yes|no|1|0|on|off
*status: yes|no|1|0|on|off
*unadorned: yes|no|1|0|on|off
*/

function  showDialog(){
// 弹出一个showModalDialog,并以returnValue来获取返回值
var  returnValue  =  window.showModalDialog(url,aInfo,sFeatures);
if (returnValue != null ){
    // for(var i=0;i<returnValue.length;i++){
     // document.all.info.innerHTML = returnValue[i]+"<br>";
    // }
    // 输出返回值
   document.all.info.innerHTML = returnValue;
}
//

}
// -->
</ script >
</ head >

< body >
< h3 >< a  href ="#"  onclick ="showDialog()" > 打开Dialog窗口 </ a ></ h3 >
< div  id ="info" ></ div >
</ body >
</ html >

 

2、子窗口（即将被弹出的那个页面）
dialog.html
-----------------------------------------------------------------------------------------

< html >
< head >
< title > Dialog </ title >
</ head >

< body >
< script  language ="JavaScript" >
<!--
// 获取父窗口传来的对象（本例中就是父页面中的“oInfo”数组对象，也可用“window”对象，以便对父页面进行操作。总之，只要是object类型就成。）
var  args  =  window.dialogArguments;
if (args != null ){
// document.write(args);
for ( var  i = 0 ;i < args.length;i ++ ){
   document.writeln(args[i] + "   " + (i + 1 ) * 10 );
}
} else {
document.writeln( " 对不起，参数为空 " );
}
// 向父窗口返回的值
window.returnValue  =   " 这是子窗口返回来的值 " ;
// -->
</ script >
</ body >
</ html >

--------------------------------------------------------------------

好了，运行showModalDialog.html即可看出其中的端倪来了。。。

通过这些工作，我实现了将值在父页面和子页面中的相互传递和处理。我想这也正是ms设计showModalDialog()方法的初衷之所在吧。当然，这个例子太简单了。但我的目的只是通过它了解showModalDialog的执行机制。实际应用中需要举一反三才行呢。（完）