Javascript 兩個窗體之間傳值實現代碼
2024-05-06 14:13:48
供稿：網友
如我們新建窗體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函數同樣會返回一個子窗體的引用，因此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>
