top:永远指分割窗口最高层次的浏览器窗口;parent:包含当前分割窗口的父窗口,本文将围绕js中top、parent、frame进行讲述及他们的应用案例
引用方法top：
该变量永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令，就可以用top变量。
parent：
该变量指的是包含当前分割窗口的父窗口。如果在一个窗口内有分割窗口，而在其中一个分割窗口中又包含着分割窗口，则第2层的分割窗口可以用parent变量引用包含它的父分割窗口。
附：Window对象、Parent对象、Frame对象、Document对象和Form对象的阶层关系
Windwo对象→Parent对象→Frame对象→Document对象→Form对象，如下：
parent.frame1.document.forms[0].elements[0].value;
在
JS中：window.location(window.location.href)和
window.top.location(window.top.location.href)是一样的意思
可以通过top来调用任何一个frame,因为top指的是最外层的frameset，可以调用它里面的任何一个子元素frame。
如：top.outterFrame1.location和top.innerFrame2.location等。
parent指的是当前窗口（frame）的父窗口(frameset)可以调用它里面的任何一个子元素frame。如：parent.innerFrame1.location和parent.innerFrame2.location等。
<html> <head> <title>top frame parent示例</title> <script language="javaScript" type="text/javaScript"> window.location.href="http://www.baidu.com/"; </script> </head> <frameset id="outFrameset" rows="150,*,150" cols="*" border="5"> <frame name="frameName1" id="frameId1" src="a.html"> <frameset id="inFrameset" cols="150,*" rows="*"> <frame name="innerFrameName1" id="innerFrameId1" src="a.html"> <frame name="innerFrameName2" id="innerFrameId2" src="a.html"> </frameset> <frame name="frameName2" id="frameId2" src="a.html"> </frameset> </html>
View Code
自己的一个示例代码（权限top,left,right页面，在top窗口的页面中获取一个连接地址，让left窗口去请求这个地址，并将响应回来的页面，显示在left窗口中）的一个jsp代码
1 //当top页面加载完后，left页面自动显示top第一个一级菜单下的拥有的二级菜单
2 $(document).ready(function(){
3 //获取遍历出来的第一个超链接的对象
4 var firstA=$("#turnto1");
5 var ahref=firstA.attr("href");
6 //当top页面加载完毕后，left页面自动发送第一个遍历出来的一级菜单的连接地址。
7 parent.leftFrame.location.href=ahref;
8
9 });
10 </script>
11 </head>
12
13 <body style="background:url(<%=request.getContextPath() %>/master/images/topbg.gif) repeat-x;">
14
15 <div class="topleft">
16 <a href="<%=request.getContextPath() %>/master/main.jsp" target="_parent"><img src="<%=request.getContextPath() %>/master/images/logo.png" title="系统首页" /></a>
17 </div>
18
19 <ul class="nav">
20
21
22
23 <c:forEach items="${list }" var="powers" varStatus="vars">
24
25 <li><a href='<%=request.getContextPath() %>${powers.sysPowerUrl }=${powers.sysPowerId}' id="turnto${vars.count }" target="leftFrame" class="selected"><img src="<%=request.getContextPath() %>/master/images/icon01.png" title="${powers.sysPowerName }" /><h2>${powers.sysPowerName }</h2></a></li>
26
27 </c:forEach>
28
29
30 </ul>
View Code
上面示例的页面框架
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>信息管理系统界面</title> 7 <jsp:include page="/master/public/head.jsp"></jsp:include> 8 </head> 9 <frameset rows="88,*" cols="*" frameborder="no" border="0" framespacing="0"> 10 <frame src="<%=request.getContextPath() %>/master/sysUser_queryModule.action?powerParentId=0" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" /> 11 <frameset cols="187,*" frameborder="no" border="0" framespacing="0"> 12 <frame src="<%=request.getContextPath() %>/master/left.jsp" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" /> 13 <frame src="<%=request.getContextPath() %>/master/user/index.jsp" name="rightFrame" id="rightFrame" title="rightFrame" /> 14 </frameset> 15 </frameset> 16 <body> 17 </body> 18 </html>
View Code