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
