子視窗和父視窗互動的內容,基本上無非就是把子視窗的資訊傳遞給父視窗,並且關閉自己等等,或者是父視窗把自己的資訊傳遞給子視窗等等。
1。父視窗傳遞資訊給子視窗
看代碼執行個體:
<script language=javascript>
function outPut()
{
//擷取父視窗的文本資訊賦值給text
var text = document.abc.text.value;
//開啟子視窗,並且把操作控制代碼賦值給win變數,以下所有操作都是針對win對象的
var win = window.open("","mywin", "menubar=no,width=400,height=100,resizeable=yes");
//輸出基本資料
win.document.writeln("<title>輸出結果</title>");
win.document.writeln("你的資訊是:<p>");
//輸出從父視窗擷取的資訊
win.document.writeln(text);
win.document.close();
win.focus();
}
</script>
<form name=abc method=post>
<input type=text name=text size=50>
//調用上面的函數
<input type=button value=提交 onClick="outPut()">
</form>
2。子視窗傳遞參數給父視窗
我們對上面的代碼進行改造:
<script language=javascript>
function outPut()
{
var text = document.abc.text.value;
var win = window.open("","mywin", "menubar=no,width=400,height=100,resizeable=yes");
win.document.writeln("<title>輸出結果</title>");
win.document.writeln("你的資訊是:<p>");
win.document.writeln(text);
win.document.writeln("<input type=text name=child value=子視窗資訊>");
//對子視窗本身操作,使用self對象,對父視窗操作使用opener對象,這是關鍵
//把子視窗中表單的值回傳給父視窗,取代父視窗表單以前的值,然後關閉子視窗
win.document.writeln("<input type=button value=關閉自己 onClick='window.opener.abc.text.value=self.child.value;self.close()'>");
//可以控制關閉父視窗
win.document.writeln("<input type=button value=關閉父視窗 onClick='window.opener.opener=null;window.opener.close()'>");
//重新整理父視窗
win.document.writeln("<input type=button value=重新整理父視窗 onClick='window.opener.location.reload()'>");
win.document.close();
win.focus();
}
</script>
<form name=abc method=post>
<input type=text name=text size=50>
<input type=button value=提交 onClick="outPut()">
</form>
3。不是同頁面的子視窗和父視窗互動
假設我們涉及到外部程式,比如php、asp等等,那麼我們處理的可能是兩個頁面,比如,上傳功能,我們就是需要開啟一個新頁面,然後再把新頁面中的值傳遞給父頁面。
局部代碼執行個體:
<input type="input" value="" name="input_tag" id = "input_tag" onKeyUp="clearPreTagStyle()" size="40">
<input type="hidden" value="0" name="tagid" id="tagid">
<input type="button" value="標籤" onclick="popUpWindow('tag.php?tag='+escape(document.tryst_form.input_tag.value))">
以上是父視窗的部分代碼,裡面的popUpWindow是封裝好的window.open函數,所以理解面面的tag.php是另外一個頁面就可以,我們需要把當前表單中的值提交給tag.php頁面去處理。
tag.php部分代碼:
查詢標籤結果:
<a href="#" name="tag_1">生活</a><a href="#" onclick="opener.document.tryst_form.input_tag.value = document.tag_1.innerHTML">加入該標籤</a>
<a href="#" name="tag_2">生活秀</a><a href="#" onclick="opener.document.tryst_form.input_tag.value = document.tag_2.innerHTML">加入該標籤</a>
這個就是我們的子視窗,我們要把tag_1和tag_2返回到子視窗中,雖然他們不是同一個頁面。這裡有個知識點,就是我們如何擷取串連中的值,我們使用innerHTML 屬性:document.tag_2.innerHTML 這個就是我們擷取了tag_2的值“生活秀”,我們也能使用其他方法擷取,比如:document.all.tag_2.innerHTML,或者this.innerHTML就是指本身的連結的值。
訪問父視窗也是使用opener對象來處理:opener.document.tryst_form.input_tag.value,就能夠改變父視窗的值。
基本我目前瞭解就是如此,以後有東西繼續添加。
--------------------------------------------------------------------------------------------------------------------------
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>