Web開發中適當運用一些彈出子窗口有很多好處,可以節省頁面設計代價,獲得好的用戶體驗,在最近項目開發中我遇到了幾個父子窗口的問題,現在整理給大家,希望有所幫助.
情景一: 打開某一子窗口, 子窗口中任一按鈕點擊時候不能彈出新頁面，進行完操作后,關閉該子窗口,刷新父窗口.
1: 頁面A:父窗口,其中有一個打開子窗口的鏈接,<a href="#"onclick="open()">頁面C</a>
A中有如下js代碼:
<script language="JavaScript">
function open()
{
window.showModalDialog("頁面B");
}
</script> 2: 頁面B,此為中間頁,起過渡作用
B html 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>**</title>
</head>
<frameset rows="0,*">
<frame src="about:blank">
<frame src="頁面C">
</frameset><noframes></noframes>
</html>
3:頁面C ,要打開的子窗口.
它關閉時候刷新父窗口很簡單,只要把A中
<a href="#"onclick="open()">頁面C</a> 改為
<a href="頁面A"onclick="open()">頁面C</a>
情景二:打開某一需要用到activex控件子窗口, 子窗口中任一按鈕點擊時候不能彈出新頁面，進行完操作后,關閉該子窗口,刷新父窗口.
此時候就不能用 window.showModalDialog（）事件打開模式對話框了，因為activex控件會報錯，必須用window.open()
1: 頁面A:父窗口,其中有一個打開子窗口的鏈接,<a href="#"onclick="open()">頁面B</a>
A中有如下js代碼.
2: 頁面B,要打開的子窗口，關閉時候觸發window.opener.location.reload();window.close();即可刷新父窗口并且關閉子窗口.
情景三:打開某一子窗口, 讓用戶選擇要添加的東東，譬如要添加到文章里的相片選擇后關閉子窗口，然后選擇的東東出現在父窗口里.
在下圖中，我點擊"添加照片"鏈接然后彈出子窗口，在子窗口中選擇后點擊"添加照片"按鈕，子窗口自動關閉，并且父窗口"已添加照片："下面列出了我選擇的照片。
實現方法：類似情景一需要中間頁面B ， 只是子窗口C中點擊"添加按鈕"時觸發的js事件中，除了獲得選中的checkbox的值外,還要把獲得的值回傳給父窗口,傳值回去的代碼如下.
<script language="JavaScript">
function open()
{
window.open("頁面B",'upload', 'height=400, width=420, top=0, left=0, toolbar=no, menubar=no,scrollbars=no, resizable=no,location=no, status=no');
}
</script>
window.parent.returnValue="選中的checkbox";
window.parent.close();
而父窗口要捕獲此值就要在情景一中所說的open()事件中添加獲得返回值
<script language="JavaScript">
function open()
{
var str=window.showModalDialog("頁面C");
if(str!=null)
{
picobj.innerHTML+=str;
}
}
</script>
注意這里的str是獲取的返回值, 而picobj是你要顯示被選擇東東所放位置的div的id ,這里是<div id=picobj></div>