一、前言

要打開一個可以載入頁面的子窗口有三種方法，分別是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?οnkeydοwn="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="關閉"?οnclick="window.close()">

也要配合<base?target="_self">，不然會打開一個新的IE窗口，然后再關掉的。

?

七、?showModalDialog和showModelessDialog數據傳遞技巧（例子用的是showModalDialog函數，showModelessDialog函數的用法一樣）

1)???父窗體向打開的窗體傳遞數據一般使用url參數傳遞

2)??打開的窗體，即子窗體向父窗體進行數據傳遞有兩種方法

(1)????第一種稱為“函數法”，同調用一個函數并返回值一樣

可以通過在被調用的頁面（子頁面）使用window.returnValue來設置返回值，返回值可以是任何值或對象，調用頁面（父頁面）直接獲取返回值即可。

//父窗體js，直接通過函數獲取返回值

???????function?openModalWindow(){

???????????var?returnValue?=?window.showModalDialog("sonPage.aspx");

???????????alert(returnValue);

???????}

?

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

????function?setReturnFatherPageValue(){

???????window.returnValue?=?true;

????}

?

(2)????第二種稱為“引用法”，通過傳遞父窗體的引用，我們可以操作父窗體上的所有東西

要使用引用法就必須在打開子窗體時將父窗體作為一個參數傳遞給子窗體，而在子窗體可以通過window.dialogArguments獲取到傳遞過來的父窗體的引用。

//父窗體js，將整個父window作為參數傳遞給子窗體

???????function?openModalWindow(){

???????????window.showModalDialog("sonPage.aspx",?window);

???????}

?

??????//子窗體js，通過window.dialogArguments可以訪問父window中的所有元素，它在這里代表了父window對象

???????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;");

都可

?

九、??窗口高度自適應，這個需要在每個彈出框加載的頁面放置，比較麻煩，而且不完善，使用時請調試好

<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>

?

然后如下設置即可：

<body?οnlοad="resetDialogHeight()">

總結

以上是生活随笔為你收集整理的showModalDialog和showModelessDialog缓存问题，参数详解，的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。