(转)窗口间的关系与交互（二）_交互有关联的多个窗口是否有其标志-优快云博客

本文介绍了网页中不同窗口之间的交互方式，包括如何访问子窗口内的变量和函数，以及如何在父窗口与子窗口之间传递数据。

前一篇讲了窗口间的关系，下面来谈谈怎么交互。

说到底很简单，找到了所需要交互的窗口，就像访问本窗口内的对象来访问目标窗口内的变量、函数、或html对象等。

当然也要举个例子。

a.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<div id="div1">div的内容</div>

</body>

</html>

var a = "test";

function GetString()

{

return "a窗口的值";

}

</script>

b.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

BBBBBBBB

</body>

</html>

function Show()

{

alert("父窗口的变量a的值= "+ window.parent.a);

alert("父窗口的函数GetString() = "+ window.parent.GetString());

alert("父窗口的元素div的innerHTML = "+ window.parent.document.getElementById("div1").innerHTML);

}

</script>

通过浏览器访问a.htm,点击click可得到相应的结果。如此一台，窗口间的操作就容易很多。

再举个窗口间传值的简单例子。

要求实现如下：在父窗口中打开一个子窗口，输入相关内容，关闭子窗口，将输入值返回到父窗口。

这是最常见的需求。

可以用window.open或window.showModalDialog来实现。

注意：showModalDialog仅适用于ie。

以下是例子。

a.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

</body>

</html>

function GoInput()

{

window.open("b.htm");

}

function GoInputModal()

{

var ary = window.showModalDialog("b.htm");

if(ary!=null)

{

SetValue(ary);

}

function SetValue(ary)

{

document.getElementById("t1").value = ary[0];

document.getElementById("t2").value = ary[1];

}

</script>

b.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

</body>

</html>

function GoReturn()

{

var ary = new Array(document.getElementById("t1").value,document.getElementById("t2").value);

if(window.opener!=null &&

typeof(window.opener.SetValue)!= "undefined")

{

window.opener.SetValue(ary);

}

else

{

window.returnValue = ary;

}

window.close();

}

</script>

运行a.htm可看到相关结果。

懂得了基本原理，不论情况有多么复杂，问题都会迎刃而解。

其实多看看，再想想方法就出来了