Javascript 兩個窗體之間傳值實現(xiàn)代碼
更新時間:2009年09月25日 14:46:45 作者:
眾所周知window.open() 函數(shù)可以用來打開一個新窗口,那么如何在子窗體中向父窗體傳值呢,其實通過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中即可通過window.opener來訪問父窗體中的元素:
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()" />
其實在打開子窗體的同時,我們也可以對子窗體的元素進行賦值,因為window.open函數(shù)同樣會返回一個子窗體的引用,因此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()" />
通過判斷子窗體的引用是否為空,我們還可以控制使其只能打開一個子窗體:
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()" />
光這樣還不夠,當關閉子窗體時還必須對父窗體的child變量進行清空,否則打開子窗體后再關閉就無法再重新打開了:
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:
復制代碼 代碼如下:
<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中即可通過window.opener來訪問父窗體中的元素:
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()" />
其實在打開子窗體的同時,我們也可以對子窗體的元素進行賦值,因為window.open函數(shù)同樣會返回一個子窗體的引用,因此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()" />
通過判斷子窗體的引用是否為空,我們還可以控制使其只能打開一個子窗體:
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()" />
光這樣還不夠,當關閉子窗體時還必須對父窗體的child變量進行清空,否則打開子窗體后再關閉就無法再重新打開了:
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>
您可能感興趣的文章:
相關文章
Bootstrap彈出框之自定義懸停框標題、內(nèi)容和樣式示例代碼
這篇文章主要介紹了Bootstrap彈出框之自定義懸??驑祟}、內(nèi)容和樣式示例代碼,需要的朋友可以參考下2017-07-07
淺談JS對html標簽的屬性的干預以及對CSS樣式表屬性的干預
下面小編就為大家?guī)硪黄獪\談JS對html標簽的屬性的干預以及對CSS樣式表屬性的干預。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
JavaScript創(chuàng)建對象的四種常用模式實例分析
這篇文章主要介紹了JavaScript創(chuàng)建對象的四種常用模式,結(jié)合實例形式分析了javascript使用工廠模式、構(gòu)造函數(shù)模式、原型模式及動態(tài)原型模式創(chuàng)建對象的相關操作技巧與注意事項,需要的朋友可以參考下2019-01-01
livereload工具實現(xiàn)前端可視化開發(fā)【推薦】
本文將介紹一個工具--livereload。這是一款能根據(jù)你本地文件(html、css、js)的變化,自動跟蹤刷新瀏覽器的實時刷新工具,有了這個工具,會大大減輕你刷新頁面的工作量。下面跟著小編一起來看下吧2016-12-12
js獲取RadioButtonList的Value/Text及選中值等信息實現(xiàn)代碼
RadioButtonList的Value,Text及選中值等信息想必有很多的朋友都想獲取到,接下來將為你介紹下如何使用js獲取,代碼很詳細,感興趣的你可以參考下,或許對你有所幫助2013-03-03

