您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > Javascript怎么在兩個(gè)窗體之間傳值

Javascript怎么在兩個(gè)窗體之間傳值

文章來源：365jz.com 點(diǎn)擊數(shù)：686 更新時(shí)間：2009-09-26 11:41 參與評論

原文：劉武|Javascript怎么在兩個(gè)窗體之間傳值

眾所周知window.open() 函數(shù)可以用來打開一個(gè)新窗口，那么如何在子窗體中向父窗體傳值呢，其實(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()" />

其實(shí)在打開子窗體的同時(shí)，我們也可以對子窗體的元素進(jìn)行賦值，因?yàn)?strong>window.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()" />

通過判斷子窗體的引用是否為空，我們還可以控制使其只能打開一個(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í)還必須對父窗體的child變量進(jìn)行清空，否則打開子窗體后再關(guān)閉就無法再重新打開了：

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>