js中的showModalDialog的实战应用
IE提供的showModalDialog()方法是一個(gè)很好用的Web應(yīng)用功能，雖然一般的網(wǎng)站應(yīng)用不是很常見(jiàn)，但一旦涉及到企業(yè)應(yīng)用級(jí)的Web開(kāi)發(fā)則就很有用了。現(xiàn)在我用一個(gè)簡(jiǎn)單易懂的例子來(lái)說(shuō)明一下：
這一應(yīng)用需要兩個(gè)web文件：
1、父窗口（也即用來(lái)控制彈出窗口的那個(gè)頁(yè)面）
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
*/
functionshowDialog(){
//彈出一個(gè)showModalDialog,并以returnValue來(lái)獲取返回值
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="#" οnclick="showDialog()">打開(kāi)Dialog窗口</a></h3>
<div id="info"></div>
</body>
</html>
2、子窗口（即將被彈出的那個(gè)頁(yè)面）
dialog.html
-----------------------------------------------------------------------------------------
<html>
<head>
<title>Dialog</title>
</head>
<body>
<script language="JavaScript">
<!--
//獲取父窗口傳來(lái)的對(duì)象（本例中就是父頁(yè)面中的“oInfo”數(shù)組對(duì)象，也可用“window”對(duì)象，以便對(duì)父頁(yè)面進(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 = "這是子窗口返回來(lái)的值";
//-->
</script>
</body>
</html>
--------------------------------------------------------------------
好了，運(yùn)行showModalDialog.html即可看出其中的端倪來(lái)了。。。
通過(guò)這些工作，我實(shí)現(xiàn)了將值在父頁(yè)面和子頁(yè)面中的相互傳遞和處理。我想這也正是ms設(shè)計(jì)showModalDialog()方法的初衷之所在吧。當(dāng)然，這個(gè)例子太簡(jiǎn)單了。但我的目的只是通過(guò)它了解showModalDialog的執(zhí)行機(jī)制。實(shí)際應(yīng)用中需要舉一反三才行呢。（完
?
轉(zhuǎn)載于:https://www.cnblogs.com/liaoshiyong/archive/2013/06/13/3150881.html
總結(jié)
以上是生活随笔為你收集整理的js中的showModalDialog的实战应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 三种Ext提交数据的方法(转)
- 下一篇： IE6/7 BUG 图片不能居中