window.open()和window.showModalDialog
零、window.open()和window.showModalDialog
本人在使用時主要實現如下個功能，
以對話框形式彈出畫面，且要求對話框置頂，不可操作其他畫面，並且關閉畫面時刷新父頁面。
window.open 可實現以對話框形式彈出畫面，並且關閉畫面時刷新父頁面。但“對話框置頂，不可操作其他畫面”本人並未找到方法。
//刷新父頁面
Response.Write("<script>window.opener.location.href=window.opener.location.href;</script>");
//關閉窗口
Response.Write("<script>window.opener=null;window.close();</script>");
window.showModalDialog 可實現以對話框形式彈出畫面，且對話框置頂，不可操作其他畫面。關閉畫面時刷新父頁面需要通過頁面傳值的方式實現。
但無奈window.showModalDialog是在前臺點擊事件中使用直接跳轉，沒法接受傳值，所以刷新方式使用了父頁面定時刷新。
以下是通過整理了前輩們的總結作為記錄：
一、window.open() 可將
基本語法：window.open(pageURL,name,parameters)
pageURL 為子窗口路徑
name 為子窗口句柄
parameters 為窗口參數(各參數用逗號分隔)
示例：window.open (‘page.html‘,‘newwindow‘,‘height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no‘)
各項參數
其中yes/no也可使用1/0；pixel value為具體的數值，單位象素。
| 參數 | 取值範圍 | 說明 |
| alwaysLowered | yes/no | 指定窗口隱藏在所有窗口之後 |
| alwaysRaised | yes/no | 指定窗口懸浮在所有窗口之上 |
| depended | yes/no | 是否和父窗口同時關閉 |
| directories | yes/no | Nav2和3的目錄欄是否可見 |
| height | pixel value | 窗口高度 |
| hotkeys | yes/no | 在沒菜單欄的窗口中設安全退出熱鍵 |
| innerHeight | pixel value | 窗口中文檔的像素高度 |
| innerWidth | pixel value | 窗口中文檔的像素寬度 |
| location | yes/no | 位置欄是否可見 |
| menubar | yes/no | 菜單欄是否可見 |
| outerHeight | pixel value | 設定窗口(包括裝飾邊框)的像素高度 |
| outerWidth | pixel value | 設定窗口(包括裝飾邊框)的像素寬度 |
| resizable | yes/no | 窗口大小是否可調整 |
| screenX | pixel value | 窗口距屏幕左邊界的像素長度 |
| screenY | pixel value | 窗口距屏幕上邊界的像素長度 |
| scrollbars | yes/no | 窗口是否可有滾動欄 |
| titlebar | yes/no | 窗口題目欄是否可見 |
| toolbar | yes/no | 窗口工具欄是否可見 |
| Width | pixel value | 窗口的像素寬度 |
| z-look | yes/no | 窗口被激活後是否浮在其它窗口之上 |
1.原窗口與彈出窗口之間的對象定位
概述：彈出窗口是我們在頁面編程中經常使用的一種方式，從互動角度分析，彈出窗口主要有兩種類型，
一種是信息顯示窗口，例如人員信息、文章信息等等； 對於信息顯示窗口，用戶看完之後關閉就可以了.
另外 一種是繼續處理窗口，例如有些項目中，新建文章就是彈出窗口來完成的。對於繼續處理窗口，在用戶繼續處 理之後，往往需要與原窗口進行戶動，例如當在新窗口中創建一篇文章提交後，希望在彈出窗口關閉的同時，原窗口能夠刷新等等。
解決方式：上面方式的一個關鍵就是，如何獲取原窗口與彈出窗口對象，在DOM模型中我們可以明確的看到：
原窗口中獲取彈出窗口對象：
var infoWindow=window.open ( “create.jsp” , “_blank” , “width=500,height=400″ ) ;//infoWindow即代表了彈出窗口的window對象，
例如在彈出窗口中有一個表單(myForm)和表單中的一個輸入控件(username)，我們可以這樣操作：
infoWindow.document.myForm.username.value= “lisi” ;
彈出窗口中獲取原窗口對象：
如上例，在create.jsp中，我們可以如下操作來刷新原窗口
opener.location.reload () ;//opener是DOM中提供的一個默認對象，表示的就是某個窗口的原窗口。
2.wondow.open的緩存處理
概述：如果window.open鏈接的target指定的是一個已經存在了的窗口，尤其是原頁面中的一個frame和iframe的話，此時 window.open打開的鏈接頁面將不會從服務器重新請求，而是使用瀏覽器中相應的緩存頁面，至少ie給人的感覺就是這樣的，例如：
<input type= “button” value= “顯示列表” onclick= “window.open(’/myoa/users/list.jsp’,‘main’,”)” />
<hr>
<iframe name= “main” src= “/myoa/users/list.jsp” width= “100%” height= “600″ frameborder=“0″ ></iframe>
第一次方式該頁面是可以看到一個列表，那麽此時即使新創建一條記錄，那麽再點擊“顯示列表”按鈕時，會發現列表沒有發生變化，此時關閉瀏覽器重新進行發現列表出現了剛創建的那條記錄，可見緩存起了作用。
解決辦法：實驗中我們發現，中導向鏈接不會發生上面的現象，每次都是重新請求，同樣是上面的例子，使用下面的方式就是可以的：
<a href= “/myoa/users/list.jsp” target= “main” >顯示列表</a>
<hr>
<iframe name= “main” src= “/myoa/users/list.jsp” width= “100%” height= “600″ frameborder=“0″ ></iframe>
不過有許多時候，我們不的不使用window.open到本頁面某個iframe的方式（以後你可能會碰到的），那麽可以類這樣解決：
<input type=”button” value=”顯示列表” onclick=”document.getElementById(’showlist’).click()”/>
<a href=”/myoa/users/list.jsp” target=”main” id=”showlist” style=”display:none”>顯示列表</a>
<hr>
<iframe name=”main” src=”/myoa/users/list.jsp” width=”100%” height=”600″ frameborder=”0″></iframe>
二、window.showModalDialog
基本介紹：
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用來創建一個顯示HTML內容的模態對話框。
window.showModelessDialog()方法用來創建一個顯示HTML內容的非模態對話框。
基本語法：
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
參數說明：
sURL -- 必選參數，類型：字符串。用來指定對話框要顯示的文檔的URL。
vArguments -- 可選參數，類型：變體。用來向對話框傳遞參數。傳遞的參數類型不限，包括數組等。對話框通過
window.dialogArguments來取得傳遞進來的參數。
sFeatures -- 可選參數，類型：字符串。用來描述對話框的外觀等信息，可以使用以下的一個或幾個，用分號“;”隔開。
示例 window.showModalDialog(‘page.html‘, ‘‘,‘dialogHeight=30;dialogWidth=60;dialogTop=30;dialogLeft=465;center=yes;resizable:no;scroll:no;status:no;help=no‘)
各項參數
| 參數 | 取值範圍 | 說明 |
| center | yes | no | 1 | 0 | 窗口是否居中，默認yes，但仍可以指定高度和寬度 |
| resizable | yes | no | 1 | 0 | 是否可被改變大小。默認no。 |
| status | yes | no | 1 | 0 | 是否顯示狀態欄。默認為yes[ Modeless]或no[Modal]。 |
| scroll | yes | no | 1 | 0 | 指明對話框是否顯示滾動條。默認為yes。 |
| help | yes | no | 1 | 0 | 是否顯示幫助按鈕，默認yes。 |
| dialogHeight | 對話框高度，不小於１００px，ＩＥ４中dialogHeight 和 dialogWidth 默認的單位是em，而ＩＥ５中是px，為方便其見，在定義modal方式的對話框時，用px做單位。 | |
| dialogWidth | 對話框寬度。 | |
| dialogLeft | 離屏幕左的距離。 | |
| dialogTop | 離屏幕上的距離。 | |
| 下面幾個屬性是用在HTA中的，在一般的網頁中一般不使用。 | ||
| dialogHide | yes | no | 1 | 0 | on | off | 在打印或者打印預覽時對話框是否隱藏。默認為no。 |
| edge | sunken | raised | 指明對話框的邊框樣式。默認為raised。 |
| unadorned | 默認為no。 |
參數傳遞：
1.要想對話框傳遞參數，是通過vArguments來進行傳遞的。類型不限制，對於字符串類型，最大為4096個字符。也可以傳遞對象，例如：
parent.htm：
<script>
var obj = new Object();
obj.name="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
modal.htm：
<script>
var obj = window.dialogArguments
alert("您傳遞的參數為：" + obj.name)
</script>
2.可以通過window.returnValue向打開對話框的窗口返回信息，當然也可以是對象。例如：
parent.htm
<script>
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>
modal.htm
<script>
window.returnValue="http://...";
</script>
常見技巧：
一、怎樣才讓在showModalDialog和showModelessDialog的超連接不彈出新窗口？
在被打開的網頁裏加上<base target="_self">就可以了。這句話一般是放在<head>之間的。
二、怎樣才刷新showModalDialog和showModelessDialog裏的內容？
在showModalDialog和showModelessDialog裏是不能按F5刷新的，又不能彈出菜單。這個只能依靠javascript了，以下是相關代碼：
<body onkeydown="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" style="display:none">reload...</a>
將filename.htm替換成網頁的名字然後將它放到你打開的網頁裏，按F5就可以刷新了，註意，這個要配合<base target="_self">使用，不然你按下F5會彈出新窗口的。
三、如何用javascript關掉showModalDialog(或showModelessDialog)打開的窗口。
<input type="button" value="關閉" onclick="window.close()">
也要配合<base target="_self">，不然會打開一個新的IE窗口，然後再關掉的。
四、Math.random與showModalDialog。
當你設置的彈出網頁固定時（如上面的"modal.htm"頁面），ie很可能到臨時文件區，下載上次產生的該頁面(openPage.html),而沒有重新加載，
對於動態加載的頁面來說，這樣往往產生誤會，如沒有及時更新數據，也就更不利於開發者測試。所以，你可以采用如下方式：
var strPage = “/medal.htm?random="+Math.random();
這樣每次產生的strPage是不一樣的，原因也就不言自明了。
事實說話：
頁面A
<script>
var obj = new Object();
obj.name = "test";
obj.value = "1212";
var s = window.showModalDialog(‘/BasicSettings/WebForm1.aspx?r=‘+Math.random(), obj, ‘dialogWidth=300px;dialogHeight=200px‘);
alert(s);//s的返回值為1212
</script>
頁面WebForm1.aspx
<script>
var s=window.returnValue=‘1212‘;
</script>
註：showModalDialog彈出的窗體在IE7以上會顯示出地址欄和狀態欄，如果覺得不好看，可以將該站點添加到可信站點中（工具選項->安全->將站點添加到可信站點）即可.
window.open()和window.showModalDialog