window.open window.showModalDialog window.showModellessDialog 區別
阿新 • • 發佈：2019-02-05
三個dom方法都是開啟新視窗 區別哪 後兩個相當於alert方式彈出視窗. 中間的一位必須關閉才可以切換其他視窗.其他兩位不是.
一、前言
要開啟一個可以載入頁面的子視窗有三種方法，分別是window.open、window.showModalDialog和window.showModelessDialog。
open方法就是開啟一個頁面，可以說同用url連結開啟一個頁面一樣，不推薦使用，因為很多瀏覽器會攔截。
這裡推薦使用的是window.showModalDialog和window.showModelessDialog，下面介紹二者的異同和用法。
二、 showModalDialog和showModelessDialog的區別
showModalDialog：被開啟後就會始終保持輸入焦點，除非對話方塊被關閉，否則使用者無法切換到父視窗，類似alert的執行效果。
showModelessDialog：被開啟後，使用者可以隨機切換輸入焦點。對主視窗沒有任何影響，最多是被擋住一下而以。
三、怎樣才讓在showModalDialog和showModelessDialog裡的超連線不彈出新視窗
在預設情況下，showModalDialog和showModelessDialog視窗中的連結都會導致開啟一個新的視窗，但這不是我們需要的。
解決這個問題的方法是在被showModalDialog和showModelessDialog視窗呼叫的頁面新增<base target="_self" />
如下：
<title>被開啟的頁面</title>
<base target="_self" />
四.、showModalDialog和showModelessDialog不使用快取
showModalDialog和showModelessDialog在第一次開啟頁面時會預設快取該頁面，如果再次開啟相同URL的頁面的話，他們會直接呼叫快取中的頁面，而不是從伺服器返回，要不使用快取可進行如下配置：
<title>被開啟的頁面</title>
<meta http-equiv="pragram" content="no-cache"> //禁止瀏覽器從本地快取中調閱頁面，網頁不儲存在快取中，每次訪問都重新整理頁面。
<meta http-equiv="cache-control" content="no-cache, must-revalidate"> //同上面意思差不多，必須重新載入頁面
<meta http-equiv="expires" content="0"> //網頁在快取中的過期時間為0，一旦網頁過期，必須從伺服器上重新訂
上面的配置不一定有效果，所以不推薦使用，最好的辦法是在URL後加上一個時間戳，如下：
url = url + “&time=” + new Date();
五、如何重新整理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會彈出新視窗的。
由於在重新整理上處理起來非常不方便，所以使用ajax結合showModalDialog和showModelessDialog使用是非常適合的，建議結合使用。
六、 用javascript關掉showModalDialog(或showModelessDialog)開啟的視窗
<input type="button" value="關閉" onclick="window.close()">
也要配合<base target="_self">，不然會開啟一個新的IE視窗，然後再關掉的。
七、 showModalDialog和showModelessDialog資料傳遞技巧（例子用的是showModalDialog函式，showModelessDialog函式的用法一樣）
1) 父窗體向開啟的窗體傳遞資料一般使用url引數傳遞
2) 開啟的窗體，即子窗體向父窗體進行資料傳遞有兩種方法
(1) 第一種稱為“函式法”，同調用一個函式並返回值一樣
可以通過在被呼叫的頁面（子頁面）使用window.returnValue來設定返回值，返回值可以是任何值或物件，呼叫頁面（父頁面）直接獲取返回值即可。
//父窗體js，直接通過函式獲取返回值
Html程式碼
- function openModalWindow(){
- var returnValue = window.showModalDialog("sonPage.aspx");
- alert(returnValue);
- }
//子窗體js，通過window.returnvalue來設定返回值
Html程式碼
- function setReturnFatherPageValue(){
- window.returnValue = true;
- }
(2) 第二種稱為“引用法”，通過傳遞父窗體的引用，我們可以操作父窗體上的所有東西
要使用引用法就必須在開啟子窗體時將父窗體作為一個引數傳遞給子窗體，而在子窗體可以通過window.dialogArguments獲取到傳遞過來的父窗體的引用。
//父窗體js，將整個父window作為引數傳遞給子窗體
Html程式碼
- function openModalWindow(){
- window.showModalDialog("sonPage.aspx", window);
- }
//子窗體js，通過window.dialogArguments可以訪問父window中的所有元素，它在這裡代表了父window物件
Html程式碼
- function openModalWindow(){
- var txt = window.dialogArguments.document.getElementByIdx("txt");
- var lab = window.dialogArguments.document.getElementByIdx("lab");
- txt.value = "sonPageChangedValue";
- lab.value = "isTheSame";
- }
八、 控制彈出窗體的樣式
1) dialogHeight: 對話方塊高度，不小於100px
2) dialogWidth: 對話方塊寬度。
3) dialogLeft: 離螢幕左的距離。
4) dialogTop: 離螢幕上的距離。
5) center: { yes | no | 1 | 0 } ： 是否居中，預設yes，但仍可以指定高度和寬度。
6) help: {yes | no | 1 | 0 }： 是否顯示幫助按鈕，預設yes。
7) resizable: {yes | no | 1 | 0 } [IE5+]： 是否可被改變大小。預設no。
8) status:{yes | no | 1 | 0 } [IE5+]：是否顯示狀態列。預設為yes[ Modeless]或no[Modal]。
9) scroll:{ yes | no | 1 | 0 | on | off }：是否顯示滾動條。預設為yes。
舉例如下：
window.showModalDialog("sonPage.aspx", "", "dialogHeight=350px;dialogwidth=410px;dialogLeft=0;dialogTop=25;help=no;resizable=no;status=no;scrollbars=no;");
或
window.showModalDialog("sonPage.aspx", window, "dialogHeight=350px;dialogwidth=500px;help=no;scrollbars=no;");
都可
九、 視窗高度自適應，這個需要在每個彈出框載入的頁面放置，比較麻煩，而且不完善，使用時請除錯好
Html程式碼
- <script type="text/javascript">
- function resetDialogHeight(){
- if(window.dialogArguments == null){
- return; //忽略非模態視窗
- }
- var ua = navigator.userAgent;
- var height = document.body.offsetHeight;
- if(ua.lastIndexOf("MSIE 6.0") != -1){
- if(ua.lastIndexOf("Windows NT 5.1") != -1){ //alert("xp.ie6.0");
- window.dialogHeight=(height+102)+"px";
- }
- else if(ua.lastIndexOf("Windows NT 5.0") != -1){ //alert("w2k.ie6.0");
- window.dialogHeight=(height+49)+"px";
- }
- }
- else{
- window.dialogHeight=height+"px";
- }
- }
- </script>
然後如下設定即可：
Html程式碼
- <body onload="resetDialogHeight()">
謝謝這些高手