window.open、window.showModalDialog和window.showModelessDialog 的區別[轉]

時間 2019-11-18

標籤 window.open window open window.showmodaldialog showmodaldialog window.showmodelessdialog showmodelessdialog 區別欄目 Windows 简体版

原文原文鏈接

1、前言
要打開一個能夠載入頁面的子窗口有三種方法，分別是window.open、window.showModalDialog和window.showModelessDialog。
open方法就是打開一個頁面，能夠說同用url連接打開一個頁面同樣，不推薦使用，由於不少瀏覽器會攔截。
這裏推薦使用的是window.showModalDialog和window.showModelessDialog，下面介紹兩者的異同和用法。

2、 showModalDialog和showModelessDialog的區別
showModalDialog：被打開後就會始終保持輸入焦點，除非對話框被關閉，不然用戶沒法切換到父窗口，相似alert的運行效果。
showModelessDialog：被打開後，用戶能夠隨機切換輸入焦點。對主窗口沒有任何影響，最可能是被擋住一下而以。

3、怎樣才讓在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();

5、如何刷新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使用是很是適合的，建議結合使用。

6、用javascript關掉showModalDialog(或showModelessDialog)打開的窗口
<input type="button" value="關閉" onclick="window.close()">
也要配合<base target="_self">，否則會打開一個新的IE窗口，而後再關掉的。

7、 showModalDialog和showModelessDialog數據傳遞技巧（例子用的是showModalDialog函數，showModelessDialog函數的用法同樣）
1)   父窗體向打開的窗體傳遞數據通常使用url參數傳遞
2) 打開的窗體，即子窗體向父窗體進行數據傳遞有兩種方法
(1)    第一種稱爲「函數法」，同調用一個函數並返回值同樣
能夠經過在被調用的頁面（子頁面）使用window.returnValue來設置返回值，返回值能夠是任何值或對象，調用頁面（父頁面）直接獲取返回值便可。
//父窗體js，直接經過函數獲取返回值
     javascript

Html代碼

function openModalWindow(){
var returnValue = window.showModalDialog("sonPage.aspx");
alert(returnValue);
}

//子窗體js，經過window.returnvalue來設置返回值
java

Html代碼

function setReturnFatherPageValue(){
window.returnValue = true;
}

(2) 第二種稱爲「引用法」，經過傳遞父窗體的引用，咱們能夠操做父窗體上的全部東西
要使用引用法就必須在打開子窗體時將父窗體做爲一個參數傳遞給子窗體，而在子窗體能夠經過window.dialogArguments獲取到傳遞過來的父窗體的引用。
//父窗體js，將整個父window做爲參數傳遞給子窗體
ajax

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";
}

8、控制彈出窗體的樣式
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;");
均可

9、窗口高度自適應，這個須要在每一個彈出框加載的頁面放置，比較麻煩，並且不完善，使用時請調試好緩存