窗口间的关系及交互(一)
1.window.parent
当前窗口的上一级窗口,当前窗口可以是在iframe 中或是frameset 的一个frame中
2.window.top 当前窗口的最顶级窗口。
不管当前窗口是嵌了多少层或是通过iframe 或是frame嵌套,window.top 将返回最外层窗口。
说明:如果当前窗口不在iframe 或frame 中,window.top 或window.parent 将返回本窗口对象。
3.window.opener
通过window.opener方式打开当前窗口的窗口。
4.window.窗口名称
访问当前窗口的子窗口通过window的name 来访问。
举个简单的例子现在有a.htm,b.htm,c.htm,d.htm四个文件。
a.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body bgcolor="blue">
AAAAAAAAAAAA
<iframe src="b.htm" name="bChild"></iframe>
</body>
</html>
b.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body bgcolor="green">
BBBBBBBB
<input type="button" value="click" οnclick="javascript:Show();" />
</body>
</html>
<script type="text/javascript">
function Show()
{
alert("B的parent窗口是:"+ window.parent.location.pathname);
alert("B的top窗口是:"+ window.top.location.pathname);
var a = window.parent;
alert("a的parent窗口是:"+ a.parent.location.pathname);
alert("a的top窗口是:"+ a.top.location.pathname);
var c = a.parent;
alert("c的parent窗口是:"+ c.parent.location.pathname);
alert("c的top窗口是:"+ c.top.location.pathname);
var d = window.top;
alert("d.cChild窗口是"+ d.cChild.location.pathname);
alert("a.bChild窗口是"+ a.bChild.location.pathname);
}
</script>
c.htm
<html>
<body bgcolor="red">
CCCCCCCCCC
<iframe src="a.htm"></iframe>
</body>
</html>
d.htm
<html>
<frameset rows="50%,*">
<frame src="c.htm" name="cChild" />
<frame />
</frameset>
</html>
通过浏览器访问d.htm就可以看出这几个窗口之间的关系。具体不在详述。
窗口间的关系及交互(二)
前一篇讲了窗口间的关系,下面来谈谈怎么交互。
说到底很简单,找到了所需要交互的窗口,就像访问本窗口内的对象来访问目标窗口内的变量、函数、 或html对象等。
当然也要举个例子。
a.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body bgcolor="blue">
<iframe src="b.htm" name="bChild"></iframe>
<div id="div1">div的内容</div>
</body>
</html>
<script type="text/javascript">
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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body bgcolor="green">
BBBBBBBB
<input type="button" value="click" οnclick="javascript:Show();" />
</body>
</html>
<script type="text/javascript">
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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body bgcolor="blue">
<input type="text" id="t1" />
<input type="text" id="t2" />
<input type="button" value="新窗口输入" οnclick="javascript:GoInput()" />
<input type="button" value="新窗口输入(模态窗口)" οnclick="javascript:GoInputModal()" />
</body>
</html>
<script type="text/javascript">
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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body bgcolor="green">
<input type="text" id="t1" />
<input type="text" id="t2" />
<input type="button" value="返回" οnclick="javascript:GoReturn();" />
</body>
</html>
<script type="text/javascript">
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可看到相关结果。
懂得了基本原理,不论情况有多么复杂,问题都会迎刃而解。