window.open()和window.showModalDialog
零、window.open()和window.showModalDialog
本人在使用時主要實現如下個功能,
以對話框形式彈出畫面,且要求對話框置頂,不可操作其他畫面,並且關閉畫面時刷新父頁面。
window.open 可實現以對話框形式彈出畫面,並且關閉畫面時刷新父頁面。但“對話框置頂,不可操作其他畫面”本人並未找到方法。
//刷新父頁面
Response.Write("<script>window.opener.location.href=window.opener.location.href;</script>");
//關閉窗口
Response.Write("<script>window.opener=null;window.close();</script>");
window.showModalDialog 可實現以對話框形式彈出畫面,且對話框置頂,不可操作其他畫面。關閉畫面時刷新父頁面需要通過頁面傳值的方式實現。
但無奈window.showModalDialog是在前臺點擊事件中使用直接跳轉,沒法接受傳值,所以刷新方式使用了父頁面定時刷新。
以下是通過整理了前輩們的總結作為記錄:
一、window.open() 可將
基本語法:window.open(pageURL,name,parameters)
pageURL 為子窗口路徑
name 為子窗口句柄
parameters 為窗口參數(各參數用逗號分隔)
示例:window.open (
‘page.html‘
,
‘newwindow‘
,
‘height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no‘
)
各項參數
其中yes/no也可使用1/0;pixel value為具體的數值,單位象素。
參數 | 取值範圍 | 說明 |
alwaysLowered | yes/no | 指定窗口隱藏在所有窗口之後 |
alwaysRaised | yes/no | 指定窗口懸浮在所有窗口之上 |
depended | yes/no | 是否和父窗口同時關閉 |
directories | yes/no | Nav2和3的目錄欄是否可見 |
height | pixel value | 窗口高度 |
hotkeys | yes/no | 在沒菜單欄的窗口中設安全退出熱鍵 |
innerHeight | pixel value | 窗口中文檔的像素高度 |
innerWidth | pixel value | 窗口中文檔的像素寬度 |
location | yes/no | 位置欄是否可見 |
menubar | yes/no | 菜單欄是否可見 |
outerHeight | pixel value | 設定窗口(包括裝飾邊框)的像素高度 |
outerWidth | pixel value | 設定窗口(包括裝飾邊框)的像素寬度 |
resizable | yes/no | 窗口大小是否可調整 |
screenX | pixel value | 窗口距屏幕左邊界的像素長度 |
screenY | pixel value | 窗口距屏幕上邊界的像素長度 |
scrollbars | yes/no | 窗口是否可有滾動欄 |
titlebar | yes/no | 窗口題目欄是否可見 |
toolbar | yes/no | 窗口工具欄是否可見 |
Width | pixel value | 窗口的像素寬度 |
z-look | yes/no | 窗口被激活後是否浮在其它窗口之上 |
1.原窗口與彈出窗口之間的對象定位
概述:彈出窗口是我們在頁面編程中經常使用的一種方式,從互動角度分析,彈出窗口主要有兩種類型,
一種是信息顯示窗口,例如人員信息、文章信息等等; 對於信息顯示窗口,用戶看完之後關閉就可以了.
另外 一種是繼續處理窗口,例如有些項目中,新建文章就是彈出窗口來完成的。對於繼續處理窗口,在用戶繼續處 理之後,往往需要與原窗口進行戶動,例如當在新窗口中創建一篇文章提交後,希望在彈出窗口關閉的同時,原窗口能夠刷新等等。
解決方式:上面方式的一個關鍵就是,如何獲取原窗口與彈出窗口對象,在DOM模型中我們可以明確的看到:
原窗口中獲取彈出窗口對象:
var infoWindow=window.open ( “create.jsp” , “_blank” , “width=500,height=400″ ) ;//infoWindow即代表了彈出窗口的window對象,
例如在彈出窗口中有一個表單(myForm)和表單中的一個輸入控件(username),我們可以這樣操作:
infoWindow.document.myForm.username.value= “lisi” ;
彈出窗口中獲取原窗口對象:
如上例,在create.jsp中,我們可以如下操作來刷新原窗口
opener.location.reload () ;//opener是DOM中提供的一個默認對象,表示的就是某個窗口的原窗口。
2.wondow.open的緩存處理
概述:如果window.open鏈接的target指定的是一個已經存在了的窗口,尤其是原頁面中的一個frame和iframe的話,此時 window.open打開的鏈接頁面將不會從服務器重新請求,而是使用瀏覽器中相應的緩存頁面,至少ie給人的感覺就是這樣的,例如:
<input type= “button” value= “顯示列表” onclick= “window.open(’/myoa/users/list.jsp’,‘main’,”)” />
<hr>
<iframe name= “main” src= “/myoa/users/list.jsp” width= “100%” height= “600″ frameborder=“0″ ></iframe>
第一次方式該頁面是可以看到一個列表,那麽此時即使新創建一條記錄,那麽再點擊“顯示列表”按鈕時,會發現列表沒有發生變化,此時關閉瀏覽器重新進行發現列表出現了剛創建的那條記錄,可見緩存起了作用。
解決辦法:實驗中我們發現,中導向鏈接不會發生上面的現象,每次都是重新請求,同樣是上面的例子,使用下面的方式就是可以的:
<a href= “/myoa/users/list.jsp” target= “main” >顯示列表</a>
<hr>
<iframe name= “main” src= “/myoa/users/list.jsp” width= “100%” height= “600″ frameborder=“0″ ></iframe>
不過有許多時候,我們不的不使用window.open到本頁面某個iframe的方式(以後你可能會碰到的),那麽可以類這樣解決:
<input type=”button” value=”顯示列表” onclick=”document.getElementById(’showlist’).click()”/>
<a href=”/myoa/users/list.jsp” target=”main” id=”showlist” style=”display:none”>顯示列表</a>
<hr>
<iframe name=”main” src=”/myoa/users/list.jsp” width=”100%” height=”600″ frameborder=”0″></iframe>
二、window.showModalDialog
基本介紹:
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用來創建一個顯示HTML內容的模態對話框。
window.showModelessDialog()方法用來創建一個顯示HTML內容的非模態對話框。
基本語法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
參數說明:
sURL -- 必選參數,類型:字符串。用來指定對話框要顯示的文檔的URL。
vArguments -- 可選參數,類型:變體。用來向對話框傳遞參數。傳遞的參數類型不限,包括數組等。對話框通過
window.dialogArguments來取得傳遞進來的參數。
sFeatures -- 可選參數,類型:字符串。用來描述對話框的外觀等信息,可以使用以下的一個或幾個,用分號“;”隔開。
示例 window.showModalDialog(‘page.html‘, ‘‘,‘dialogHeight=30;dialogWidth=60;dialogTop=30;dialogLeft=465;center=yes;resizable:no;scroll:no;status:no;help=no‘)
各項參數
參數 | 取值範圍 | 說明 |
center | yes | no | 1 | 0 | 窗口是否居中,默認yes,但仍可以指定高度和寬度 |
resizable | yes | no | 1 | 0 | 是否可被改變大小。默認no。 |
status | yes | no | 1 | 0 | 是否顯示狀態欄。默認為yes[ Modeless]或no[Modal]。 |
scroll | yes | no | 1 | 0 | 指明對話框是否顯示滾動條。默認為yes。 |
help | yes | no | 1 | 0 | 是否顯示幫助按鈕,默認yes。 |
dialogHeight | 對話框高度,不小於100px,IE4中dialogHeight 和 dialogWidth 默認的單位是em,而IE5中是px,為方便其見,在定義modal方式的對話框時,用px做單位。 | |
dialogWidth | 對話框寬度。 | |
dialogLeft | 離屏幕左的距離。 | |
dialogTop | 離屏幕上的距離。 | |
下面幾個屬性是用在HTA中的,在一般的網頁中一般不使用。 | ||
dialogHide | yes | no | 1 | 0 | on | off | 在打印或者打印預覽時對話框是否隱藏。默認為no。 |
edge | sunken | raised | 指明對話框的邊框樣式。默認為raised。 |
unadorned | 默認為no。 |
參數傳遞:
1.要想對話框傳遞參數,是通過vArguments來進行傳遞的。類型不限制,對於字符串類型,最大為4096個字符。也可以傳遞對象,例如:
parent.htm:
<script>
var
obj =
new
Object();
obj.name=
"51js"
;
window.showModalDialog(
"modal.htm"
,obj,
"dialogWidth=200px;dialogHeight=100px"
);
</script>
modal.htm:
<script>
var
obj = window.dialogArguments
alert(
"您傳遞的參數為:"
+ obj.name)
</script>
2.可以通過window.returnValue向打開對話框的窗口返回信息,當然也可以是對象。例如:
parent.htm
<script>
str =window.showModalDialog(
"modal.htm"
,,
"dialogWidth=200px;dialogHeight=100px"
);
alert(str);
</script>
modal.htm
<script>
window.returnValue=
"http://..."
;
</script>
常見技巧:
一、怎樣才讓在showModalDialog和showModelessDialog的超連接不彈出新窗口?
在被打開的網頁裏加上<base target="_self">就可以了。這句話一般是放在<head>之間的。
二、怎樣才刷新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會彈出新窗口的。
三、如何用javascript關掉showModalDialog(或showModelessDialog)打開的窗口。
<input type="button" value="關閉" onclick="window.close()">
也要配合<base target="_self">,不然會打開一個新的IE窗口,然後再關掉的。
四、Math.random與showModalDialog。
當你設置的彈出網頁固定時(如上面的"modal.htm"頁面),ie很可能到臨時文件區,下載上次產生的該頁面(openPage.html),而沒有重新加載,
對於動態加載的頁面來說,這樣往往產生誤會,如沒有及時更新數據,也就更不利於開發者測試。所以,你可以采用如下方式:
var strPage = “/medal.htm?random="+Math.random();
這樣每次產生的strPage是不一樣的,原因也就不言自明了。
事實說話:
頁面A
<script>
var obj = new Object();
obj.name = "test";
obj.value = "1212";
var s = window.showModalDialog(‘/BasicSettings/WebForm1.aspx?r=‘+Math.random(), obj, ‘dialogWidth=300px;dialogHeight=200px‘);
alert(s);//s的返回值為1212
</script>
頁面WebForm1.aspx
<script>
var s=window.returnValue=‘1212‘;
</script>
註:showModalDialog彈出的窗體在IE7以上會顯示出地址欄和狀態欄,如果覺得不好看,可以將該站點添加到可信站點中(工具選項->安全->將站點添加到可信站點)即可.
window.open()和window.showModalDialog