程式隨筆
0%

【JavaScript】showModalDialog運用

Posted on Edited on Disqus:

最近公司專案有使用到IE的showModalDialog，所以做一下筆記!!

叫用方式：

1
2
3
4
5
function openWindow(url) {
   var Feature = 'dialogWidth:850px;dialogHeight:600px;status:0;help:0;';
   var showModalObj = window.showModalDialog(url, window, Feature)
}

各項參數請參考MSDN文件:參數設定

我的是寫個function,如要使用時將url傳進來。其中第二個參數window是將這這個視窗傳遞給開啟的showModalDialog，之後方便showModalDialog叫用母視窗的function或是變數。

例如我在母視窗有個alertMe的function

1
2
3
4
function alertMe() {
   alert('我是母視窗的一個function');
}

我只要在showModalDialog視窗中使用 window.dialogArguments.alertMe(); ，就可以直接到母視窗的function。

另外showModalDialog無論是postback或是location到別的網址都會開啟新視窗，所以在<head>裡面加上 

<head>
   <base target="_self" >
</head>
這樣目標就會是showModalDialog自己。

為了解決showModalDialog因為Cache的關係只有第一個會PostBack的問題，請加入以下的code在page_load事件，讓每次開啟modal dialog都會PostBack

1
2
3
4
5
6
7
8
if (!Page.IsPostBack) 
{
   //為了解決showModalDialog常常會讀到舊頁面的問題
   Page.Response.Expires = -1;
   Page.Response.AddHeader("Pragma", "no-cache");
   Page.Response.AddHeader("cache-control","no-store");
}

或是在Head裡面加上 ```html

1
2
3
4
5
6
7


**showModalDialog回傳True或false給母頁面的方法**
showModalDialog頁面寫以下Javascript 
```js
window.returnValue = false;

母頁面寫以下Javascript 

1
2
3
4
5
6
7
8
9
if (window.showModalDialog(url, window, set))
{
   alert('true');
}
else
{
   alert('false');
}

showModalDialog回傳值的方式
showModalDialog頁面寫以下Javascript： 

1
2
3
4
5
6
7
8
9
10
function GoReturnValue() {
   //宣告一個Object
   var ReturnObj = new Object();
   //給這個Object屬性值
   ReturnObj.codeValue = "i'am return value";
   //將這個Object回傳
   window.returnValue = ReturnObj;
   window.close();
}

母頁面取值方式：

1
2
3
4
var returnObj = window.showModalDialog(url, window, Feature);
//取得這個Object的屬性值，在這邊應該會得到"i'am return value"
alert(returnObj .codeValue);