窗口间的关系及交互(二)

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

说到底很简单，找到了所需要交互的窗口，就像访问本窗口内的对象来访问目标窗口内的变量、函数、 或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"  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 >

 

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 >

 

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

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