js基础:浅析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的执行机制。实际应用中需要举一反三才行呢。（完） 该文章在 2010/8/18 10:47:48 编辑过 |
关键字查询
相关文章
正在查询... 
|
400 186 1886
