JavaScript實際應用:子視窗和父視窗互動

來源:互聯網
上載者:User
javascript|父視窗|互動|子視窗

最近項目開發中需要子視窗和父視窗互動的內容,基本上無非就是把子視窗的資訊傳遞給父視窗,並且關閉自己等等,或者是父視窗把自己的資訊傳遞給子視窗等等。

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=提交 >

</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=關閉自己 >");
 //可以控制關閉父視窗
 win.document.writeln("<input type=button value=關閉父視窗 >");
 //重新整理父視窗
 win.document.writeln("<input type=button value=重新整理父視窗 >");

 win.document.close();
 win.focus();
}
</script>

<form name=abc method=post>
<input type=text name=text size=50>
<input type=button value=提交 >

</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="標籤" >

以上是父視窗的部分代碼,裡面的popUpWindow是封裝好的window.open函數,所以理解面面的tag.php是另外一個頁面就可以,我們需要把當前表單中的值提交給tag.php頁面去處理。


tag.php部分代碼:

查詢標籤結果:
<a href="#" name="tag_1">生活</a><a href="#" >加入該標籤</a>

<a href="#" name="tag_2">生活秀</a><a href="#" >加入該標籤</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,就能夠改變父視窗的值。


基本我目前瞭解就是如此,以後有東西繼續添加。


----------------------------------------------------
參考文章:

http://www.cnbug.com/Article/{C96F3C33-E894-4982-B5C2-7F87D1C2AEAC}.htm

http://www.blueidea.com/bbs/newsdetail.asp?id=142888
http://www.cnblogs.com/gxh973121/archive/2005/04/05/132664.aspx
http://51js.zahui.net/html/1/15100.htm



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。