javascript中的top与self.parent问题解决小记

  近期接到一个需求，需要把我们的一个平台接入到兄弟厂家的门户里面，接入方式是我们平台页面嵌入到对方页面内的一个iframe里面显示，其中涉及到session的跨域访问问题，需要在我们提交的Response中加入一类head信息保证Session能带入对方门户，但是在servelt 过滤器中加了该语句后奇怪的是能显示Session中的用户信息和部门信息，但就是显示不了同样存在session中的菜单树内容，代码查了半天，还是一头雾水没搞明白原因。

       查了一个下午，渐渐把目标对准了我们系统页面的组织方式，我们平台的页面结构是首页含有三个iframe，顶部iframe中的top.jsp显示用户部门信息和一级菜单,左边的iframe显示二级菜单（正是加载不出来的地方），中间的iframe就是显示操作页面的，代码如下:

<table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
 			<tr align="center">
 			    <td colspan="3">
 					<iFRAME name=top marginWidth=0 marginHeight=0 src="welcome.htm?targetURL=top" frameBorder=0 width=100% scrolling=no height=85>
 					</IFRAME>
 			     </td>
  		 	</tr>
 			<tr>
 			     <td width="200" rowspan="3" align=center valign="top" noWrap  id=frmTitle name="frmTitle">
 				   <iFRAME name=main marginWidth=0 marginHeight=0 height="508" id="leftmain" src="welcome.htm?targetURL=left" frameBorder=0  scrolling=auto 
 				   style=" VISIBILITY: inherit; WIDTH: 100%; Z-INDEX: 1">
 				   </IFRAME>
 				 </td>
 			     <TD width="9" rowspan="3" align="center" valign="middle" style="HEIGHT: 100%"  bgcolor=#F0F0F7 οnclick=switchSysBar() >
 				 <SPAN  class=navPoint id=switchPoint  title=收缩/弹出左栏 ></SPAN>
 				 	<img id=right1 src="<c:url value="/resources/v3/images/hideLeft.gif"/>" alt="right">
 				 	<img id=left src="<c:url value="/resources/v3/images/showRight.gif"/>" alt="left">
 				 </td>
    			</tr>
 			<tr>
 			     <td align="center" valign="top" >   
 				  <iFRAME name=right marginWidth=0 marginHeight=0 height="508" id="rightmain" src="welcome.htm?targetURL=welcome" frameBorder=0  scrolling=auto style=" VISIBILITY: inherit; WIDTH: 100%; Z-INDEX: 1"></IFRAME>
 			     </td>  
    			</tr>
 		</table>

我们菜单加载方式是点击top.jsp中的一级菜单就加载左边iframe的二级菜单，检查加载js函数中的关键语句

var twin = window.top.document.getElementById("leftmain");
var right = window.top.document.getElementById("rightmain");
twin.src = url;

       通过firebug的辅助分析，终于定位出就是这个小小的top的错误造成的。

       因为我们平台是作为一个iframe嵌入到对方的门户中的,这里写成top的话将指向对方的顶层的页面，当然就不能指向我们左边的iframe，所以这里要找到父节点的，必须改用self.parent，从js定义可知，在只含有一层的frame的页面中，top和self.parent作用是一样的(所以这就是我们系统单独使用没有问题)，但是如果含有嵌套的多层iframe，则top就指向最顶层的页面了，而我们平台要找的只是父页面，所以此处必须改为

var twin = window.self.parent.document.getElementById("leftmain");
var right = window.self.parent.document.getElementById("rightmain");
twin.src = url;

综上，可以体会到javascript中top和self.parent的异同。