最近項目開發中需要子窗口和父窗口交互的內容，基本上無非就是把子窗口的信息傳遞給父窗口，并且關閉自己等等，或者是父窗口把自己的信息傳遞給子窗口等等。




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=提交 οnclick="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=關閉自己 οnclick='window.opener.abc.text.value=self.child.value;self.close()'>");
//可以控制關閉父窗口
win.document.writeln("<input type=button value=關閉父窗口 οnclick='window.opener.opener=null;window.opener.close()'>");
//刷新父窗口
win.document.writeln("<input type=button value=刷新父窗口 οnclick='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=提交 οnclick="output()">

</form>


3。不是同頁面的子窗口和父窗口交互

假設我們涉及到外部程序，比如php、asp等等，那么我們處理的可能是兩個頁面，比如，上傳功能，我們就是需要打開一個新頁面，然后再把新頁面中的值傳遞給父頁面。

局部代碼實例：

<input type="input" value="" name="input_tag" id = "input_tag" οnkeyup="clearpretagstyle()" size="40">
<input type="hidden" value="0" name="tagid" id="tagid">
<input type="button" value="標簽" οnclick="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="#" οnclick="opener.document.tryst_form.input_tag.value = document.tag_1.innerhtml">加入該標簽</a>

<a href="#" name="tag_2">生活秀</a><a href="#" οnclick="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，就能夠改變父窗口的值。

總結

以上是生活随笔為你收集整理的javascript：子窗口和父窗口交互的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。