JavaScript配合，实现子窗口向父窗口的值传递

一个同事在项目中遇到点问题：在一个包含个人信息的静态页面中 想通过选择列表，选择人名之后，将页面中其他信息项自动添入信息。这个在JSF中通过Backing Bean是很好实现的。

不过他用的是JSP，搞了有将近一个星期了也没个眉目。实在看不下去了，帮他弄了一下。

代码如下：

test.html

< html >
< head >
< title > Insert title here </ title >
</ head >
< body >
< form  name ="testForm" >
< input  type ="text"  name ="name"  id ="nameField"  value ="ddd"   />
< input  type ="button"  name ="submit"  value ="test"  onclick ="window.open(" ./action.jsp");"  />
</ form >
</ body >
</ html >

action.jsp

 

<% @ page language = " java "  contentType = " text/html; charset=ISO-8859-1 "
    pageEncoding = " ISO-8859-1 " %>
< html >
< head >
< title > Insert title here </ title >
</ head >
< body >
<%
    String tmpStr  =  String.valueOf(Math.random());
%>
< script type = " text/javascript " >
    window.opener.document.getElementById( " nameField " ).value =   " <%= tmpStr %> " ;
    window.close();
</ script >
</ body >
</ html >

上面代码中，实现了通过action.jsp向test.html中赋值的操作。

需要注意的是：JSP的原理，JSP是需要编译为servlet来执行的。所以jsp代码与javascript的代码配合是其中的关键。

action.jsp中，在取得值tmpStr之后，在其后（body标签中）添加一段js代码，向父窗口赋值。如果这段代码放到前面，或者写到一个function中，就不行了。

另外关于通过JS实现父窗口与子窗口的值传递，与相互控制，下面引用http://blog.youkuaiyun.com/daryl715的一篇文章详细介绍。

---

　　最开始遇到这样的问题的时候，我采用的是模式窗口，这个可以做到，不过，模式窗口有很多的缺点，不能够即时更新这是我最不喜欢的，还有就是在模式窗口下，你不能够操作其父窗口。下面是我总结的一些常用的父窗口与子窗口之间的操作：
　　
　　1、从子窗口中往父窗口传值
　　如父页面有一个控制的id是choosedProvider，那么这样可以把值传给父页面：
　　opener.document.getElementById("choosedProvider”]).value=”Tom”;
　　2、从父窗口传值给子窗口，如子窗口中有id为T的控件，此时可以用如下传值：
　　
　　先抓住其句柄，然后通过句柄操作，其实比较上面的子窗口往父窗口中传值，就是操作的对象改变了一下。
　　3、子窗口关闭并刷新父口，这里有两种方式：
　　a) 子窗口关闭时关闭父窗口：
　　opener.location.reload();
　　window.close();
　　b) 父窗口去检测，子窗口是否已经关闭了，在设定的一段时间之后自动刷新：
　　
　　4、父窗口关闭的时候关闭子窗口。这个就是用方法去检测父窗口的onunload事件：
　　
　　在body加上onunload事件：
　　
　　5、子窗口中关闭父窗口，这个功能可能相对要少用一点：