前一篇讲了窗口间的关系,下面来谈谈怎么交互。
说到底很简单,找到了所需要交互的窗口,就像访问本窗口内的对象来访问目标窗口内的变量、函数、 或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 >
< 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" onclick ="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 >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title ></ title >
</ head >
< body bgcolor ="green" >
BBBBBBBB
< input type ="button" value ="click" onclick ="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 ="新窗口输入" onclick ="javascript:GoInput()" />
< input type ="button" value ="新窗口输入(模态窗口)" onclick ="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 >
< 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 ="新窗口输入" onclick ="javascript:GoInput()" />
< input type ="button" value ="新窗口输入(模态窗口)" onclick ="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 ="返回" onclick ="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 >
< 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 ="返回" onclick ="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可看到相关结果。
懂得了基本原理,不论情况有多么复杂,问题都会迎刃而解。