一、前言

要打開一個可以載入頁面的子窗口有三種方法，分別是window.open、window.showModalDialog和window.showModelessDialog。

open方法就是打開一個頁面，可以說同用url鏈接打開一個頁面一樣，不推薦使用，因為很多瀏覽器會攔截。

這里推薦使用的是window.showModalDialog和window.showModelessDialog，下面介紹二者的異同和用法。

?

二、?showModalDialog和showModelessDialog的區(qū)別

showModalDialog：被打開后就會始終保持輸入焦點，除非對話框被關(guān)閉，否則用戶無法切換到父窗口，類似alert的運行效果。

showModelessDialog：被打開后，用戶可以隨機切換輸入焦點。對主窗口沒有任何影響，最多是被擋住一下而以。

?

三、怎樣才讓在showModalDialog和showModelessDialog里的超連接不彈出新窗口

在默認(rèn)情況下，showModalDialog和showModelessDialog窗口中的鏈接都會導(dǎo)致打開一個新的窗口，但這不是我們需要的。

解決這個問題的方法是在被showModalDialog和showModelessDialog窗口調(diào)用的頁面添加<base?target="_self"?/>

如下：

????<title>被打開的頁面</title>

????<base?target="_self"?/>

?

四.、showModalDialog和showModelessDialog不使用緩存

showModalDialog和showModelessDialog在第一次打開頁面時會默認(rèn)緩存該頁面，如果再次打開相同URL的頁面的話，他們會直接調(diào)用緩存中的頁面，而不是從服務(wù)器返回，要不使用緩存可進(jìn)行如下配置：

<title>被打開的頁面</title>

<meta?http-equiv="pragram"?content="no-cache">?//禁止瀏覽器從本地緩存中調(diào)閱頁面，網(wǎng)頁不保存在緩存中，每次訪問都刷新頁面。

<meta?http-equiv="cache-control"?content="no-cache,?must-revalidate">??????????//同上面意思差不多，必須重新加載頁面

<meta?http-equiv="expires"?content="0">????//網(wǎng)頁在緩存中的過期時間為0，一旦網(wǎng)頁過期，必須從服務(wù)器上重新訂

上面的配置不一定有效果，所以不推薦使用，最好的辦法是在URL后加上一個時間戳，如下：

url?=?url?+?“&time=”?+?new?Date();

?

五、如何刷新showModalDialog和showModelessDialog里的內(nèi)容

在showModalDialog和showModelessDialog里是不能按F5刷新的，又不能彈出菜單。這個只能依靠javascript了，以下是相關(guān)代碼：

<body?οnkeydοwn="if?(event.keyCode==116){reload.click()}">

<a?id="reload"?href="filename.htm"?style="display:none">reload...</a>

將filename.htm替換成網(wǎng)頁的名字然后將它放到你打開的網(wǎng)頁里，按F5就可以刷新了，注意，這個要配合<base?target="_self">使用，不然你按下F5會彈出新窗口的。

由于在刷新上處理起來非常不方便，所以使用ajax結(jié)合showModalDialog和showModelessDialog使用是非常適合的，建議結(jié)合使用。

?

六、?用javascript關(guān)掉showModalDialog(或showModelessDialog)打開的窗口

<input?type="button"?value="關(guān)閉"?οnclick="window.close()">

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

?

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

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

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

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

可以通過在被調(diào)用的頁面（子頁面）使用window.returnValue來設(shè)置返回值，返回值可以是任何值或?qū)ο?#xff0c;調(diào)用頁面（父頁面）直接獲取返回值即可。

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

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

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

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

???????}

?

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

????function?setReturnFatherPageValue(){

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

????}

?

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

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

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

???????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:???對話框?qū)挾取?/span>

3)???????dialogLeft:????離屏幕左的距離。

4)???????dialogTop:????離屏幕上的距離。

5)???????center:??{?yes?|?no?|?1?|?0?}?：?是否居中，默認(rèn)yes，但仍可以指定高度和寬度。

6)???????help:?{yes?|?no?|?1?|?0?}：??????是否顯示幫助按鈕，默認(rèn)yes。

7)???????resizable:??{yes?|?no?|?1?|?0?}?[IE5+]：????是否可被改變大小。默認(rèn)no。

8)???????status:{yes?|?no?|?1?|?0?}?[IE5+]：是否顯示狀態(tài)欄。默認(rèn)為yes[?Modeless]或no[Modal]。

9)???????scroll:{?yes?|?no?|?1?|?0?|?on?|?off?}：是否顯示滾動條。默認(rèn)為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;");

都可

?

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

<script?type="text/javascript">

??function?resetDialogHeight(){

??????if(window.dialogArguments?==?null){

??????????return;?//忽略非模態(tài)窗口??

??????}

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

?

然后如下設(shè)置即可：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。