模式对话框

窗口间通信技巧

最新推荐文章于 2025-07-11 14:20:54 发布

原创最新推荐文章于 2025-07-11 14:20:54 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

JavaScript&AJAX 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的父窗口与子窗口之间的通信案例。通过`showModalDialog`方法打开子窗口，并演示了如何在子窗口中获取父窗口传来的值、设置父窗口的值以及返回值给父窗口的过程。

父窗口：

function openChild(){
var k =
window.showModalDialog("子窗口.html",window,"dialogWidth:335px;status:no;dialogHeight:300px");
if(k != null){
document.getElementById("txt11").value = k;  
}
}

传递到父窗口的值:<input id="txt9" type="text" value="3333333333333">
返回的值:<input id="txt11" type="text"><br>
子窗口设置的值:<input id="txt10" type="text">

子窗口：

var k=window.dialogArguments;
//获得父窗口传递来的值
if(k!=null)
{
document.getElementById("txt0").value = k.document.getElementById("txt9").value;
}
//设置父窗口的值
function setFather()
{
k.document.getElementById("txt10").value = document.getElementById("txt1").value;
}
//设置返回父窗口的值
function retrunValue()
{
var s = document.getElementById("txt2").value;
window.returnValue=s;
window.close();
}

父窗口传递来的值:<input id="txt0" type="text">
设置要输入父窗口的值:
<input id="txt1" type="text">
<input type ="button" value="设置父窗口的值" onclick="setFather()">
输入返回的值:
<input id="txt2" type="text">
<input type ="button" value="关闭" onclick="retrunValue()">