js基礎(chǔ):淺析js中的showModalDialog的實(shí)戰(zhàn)應(yīng)用
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
IE提供的showModalDialog()方法是一個(gè)很好用的Web應(yīng)用功能，雖然一般的網(wǎng)站應(yīng)用不是很常見，但一旦涉及到企業(yè)應(yīng)用級(jí)的Web開發(fā)則就很有用了。現(xiàn)在我用一個(gè)簡(jiǎn)單易懂的例子來說明一下： 這一應(yīng)用需要兩個(gè)web文件： 1、父窗口（也即用來控制彈出窗口的那個(gè)頁面） showModalDialog.html --------------------------------------------------------------------------------------- <html> <head> <title>showModalDialog</title> <script language="JavaScript"> <!-- //aInfo作為數(shù)組對(duì)象，將被showModalDialog傳遞出去 //也可用var oMyobject=new Object(); //oMyobject.firstProperty = value; oMyobject.lastProperty = value;的方式定義一個(gè)對(duì)象（firstProperty,lastProperty是自己按需定義的對(duì)象屬性，可是任意取名并賦值） 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的各項(xiàng)可選參數(shù): *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(){ //彈出一個(gè)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、子窗口（即將被彈出的那個(gè)頁面） dialog.html ----------------------------------------------------------------------------------------- <html> <head> <title>Dialog</title> </head> <body> <script language="JavaScript"> <!-- //獲取父窗口傳來的對(duì)象（本例中就是父頁面中的“oInfo”數(shù)組對(duì)象，也可用“window”對(duì)象，以便對(duì)父頁面進(jìn)行操作。總之，只要是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("對(duì)不起，參數(shù)為空"); } //向父窗口返回的值 window.returnValue = "這是子窗口返回來的值"; //--> </script> </body> </html> 好了，運(yùn)行showModalDialog.html即可看出其中的端倪來了。。。 通過這些工作，我實(shí)現(xiàn)了將值在父頁面和子頁面中的相互傳遞和處理。我想這也正是ms設(shè)計(jì)showModalDialog()方法的初衷之所在吧。當(dāng)然，這個(gè)例子太簡(jiǎn)單了。但我的目的只是通過它了解showModalDialog的執(zhí)行機(jī)制。實(shí)際應(yīng)用中需要舉一反三才行呢。（完）
該文章在 2010/8/18 10:47:48 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
