Javascript 兩個(gè)窗體之間傳值實(shí)現(xiàn)代碼
更新時(shí)間：2009年09月25日 14:46:45 作者：
眾所周知window.open() 函數(shù)可以用來(lái)打開(kāi)一個(gè)新窗口，那么如何在子窗體中向父窗體傳值呢，其實(shí)通過(guò)window.opener即可獲取父窗體的引用。
如我們新建窗體FatherPage.htm:
XML-Code:
<script type="text/javascript">
function OpenChildWindow()
{
window.open('ChildPage.htm');
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
然后在ChildPage.htm中即可通過(guò)window.opener來(lái)訪問(wèn)父窗體中的元素：
XML-Code:
<script type="text/javascript">
function SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
window.close();
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
其實(shí)在打開(kāi)子窗體的同時(shí)，我們也可以對(duì)子窗體的元素進(jìn)行賦值，因?yàn)閣indow.open函數(shù)同樣會(huì)返回一個(gè)子窗體的引用，因此FatherPage.htm可以修改為：
XML-Code:
<script type="text/javascript">
function OpenChildWindow()
{
var child = window.open('ChildPage.htm');
child.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
通過(guò)判斷子窗體的引用是否為空，我們還可以控制使其只能打開(kāi)一個(gè)子窗體：
XML-Code:
<script type="text/javascript">
var child
function OpenChildWindow()
{
if(!child)
child = window.open('ChildPage.htm');
child.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
光這樣還不夠，當(dāng)關(guān)閉子窗體時(shí)還必須對(duì)父窗體的child變量進(jìn)行清空，否則打開(kāi)子窗體后再關(guān)閉就無(wú)法再重新打開(kāi)了：
XML-Code:
<body onunload="Unload()">
<script type="text/javascript">
function SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
window.close();
}
function Unload()
{
window.opener.child=null;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
</body>
XML-Code:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function OpenChildWindow()
{
window.open('ChildPage.htm');
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
然后在ChildPage.htm中即可通過(guò)window.opener來(lái)訪問(wèn)父窗體中的元素：
XML-Code:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
window.close();
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
其實(shí)在打開(kāi)子窗體的同時(shí)，我們也可以對(duì)子窗體的元素進(jìn)行賦值，因?yàn)閣indow.open函數(shù)同樣會(huì)返回一個(gè)子窗體的引用，因此FatherPage.htm可以修改為：
XML-Code:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function OpenChildWindow()
{
var child = window.open('ChildPage.htm');
child.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
通過(guò)判斷子窗體的引用是否為空，我們還可以控制使其只能打開(kāi)一個(gè)子窗體：
XML-Code:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var child
function OpenChildWindow()
{
if(!child)
child = window.open('ChildPage.htm');
child.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
光這樣還不夠，當(dāng)關(guān)閉子窗體時(shí)還必須對(duì)父窗體的child變量進(jìn)行清空，否則打開(kāi)子窗體后再關(guān)閉就無(wú)法再重新打開(kāi)了：
XML-Code:
復(fù)制代碼 代碼如下:
<body onunload="Unload()">
<script type="text/javascript">
function SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
window.close();
}
function Unload()
{
window.opener.child=null;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
</body>
您可能感興趣的文章:
- javascript用DIV模擬彈出窗口_窗體滾動(dòng)跟隨
- Javascript showModalDialog兩個(gè)窗體之間傳值
- javascript 通過(guò)封裝div方式彈出div窗體
- JavaScript 彈出窗體點(diǎn)擊按鈕返回選擇數(shù)據(jù)的實(shí)現(xiàn)
- javascript 子窗體父窗體相互傳值方法
- 父子窗體間傳遞JSON格式的數(shù)據(jù)的代碼
- js關(guān)閉子窗體刷新父窗體實(shí)現(xiàn)方法
- 利用javaScript實(shí)現(xiàn)點(diǎn)擊輸入框彈出窗體選擇信息
- 鼠標(biāo)拖拽移動(dòng)子窗體的JS實(shí)現(xiàn)
- Ext JS動(dòng)態(tài)加載JavaScript創(chuàng)建窗體的方法
相關(guān)文章
這篇文章主要介紹了JavaScript基于ajax編輯信息用法,涉及javascript基于Ajax操作鼠標(biāo)事件及實(shí)時(shí)保存文本的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
Bootstrap彈出框之自定義懸?？驑?biāo)題、內(nèi)容和樣式示例代碼
這篇文章主要介紹了Bootstrap彈出框之自定義懸?？驑?biāo)題、內(nèi)容和樣式示例代碼,需要的朋友可以參考下2017-07-07
Ajax全稱是Asynchronous Javascript And XML（異步JavaScript和XML），在網(wǎng)頁(yè)中，利用XMLHttpRequest對(duì)象和服務(wù)器進(jìn)行數(shù)據(jù)交互的方式，這篇文章主要介紹了Ajax中GET與POST請(qǐng)求操作2022-11-11
來(lái)訪統(tǒng)計(jì)...2006-11-11
淺談JS對(duì)html標(biāo)簽的屬性的干預(yù)以及對(duì)CSS樣式表屬性的干預(yù)
下面小編就為大家?guī)?lái)一篇淺談JS對(duì)html標(biāo)簽的屬性的干預(yù)以及對(duì)CSS樣式表屬性的干預(yù)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
JavaScript創(chuàng)建對(duì)象的四種常用模式實(shí)例分析
這篇文章主要介紹了JavaScript創(chuàng)建對(duì)象的四種常用模式,結(jié)合實(shí)例形式分析了javascript使用工廠模式、構(gòu)造函數(shù)模式、原型模式及動(dòng)態(tài)原型模式創(chuàng)建對(duì)象的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-01-01
帶領(lǐng)大家學(xué)習(xí)javascript基礎(chǔ)篇(一)之基本概念
這篇文章主要介紹了帶領(lǐng)大家學(xué)習(xí)javascript基礎(chǔ)篇(一)之基本概念的相關(guān)資料,需要的朋友可以參考下2015-11-11
livereload工具實(shí)現(xiàn)前端可視化開(kāi)發(fā)【推薦】
本文將介紹一個(gè)工具--livereload。這是一款能根據(jù)你本地文件(html、css、js)的變化，自動(dòng)跟蹤刷新瀏覽器的實(shí)時(shí)刷新工具，有了這個(gè)工具，會(huì)大大減輕你刷新頁(yè)面的工作量。下面跟著小編一起來(lái)看下吧2016-12-12
js獲取RadioButtonList的Value/Text及選中值等信息實(shí)現(xiàn)代碼
RadioButtonList的Value,Text及選中值等信息想必有很多的朋友都想獲取到，接下來(lái)將為你介紹下如何使用js獲取，代碼很詳細(xì)，感興趣的你可以參考下，或許對(duì)你有所幫助2013-03-03
頁(yè)面中js的執(zhí)行順序：在頁(yè)面的head標(biāo)簽中添加一段js代碼，在頁(yè)面的尾部也就是</body>之前添加一段代碼，然后在body的onload事件中引用一個(gè)函數(shù)，此三者的執(zhí)行順序如何?2009-11-11