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

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

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

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