首页 > 代码库 > <frameset>框架集中不同<frame>之间的调用【js代码中】

<frameset>框架集中不同<frame>之间的调用【js代码中】

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=http://www.mamicode.com/"a.html"><frameset id="inFrameset" cols="150,*" rows="*"><frame name="innerFrameName1" id="innerFrameId1" src=http://www.mamicode.com/"a.html"><frame name="innerFrameName2" id="innerFrameId2" src=http://www.mamicode.com/"a.html"></frameset><frame name="frameName2" id="frameId2" src=http://www.mamicode.com/"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=http://www.mamicode.com/firstA.attr("href"); 6             //当top页面加载完毕后,left页面自动发送第一个遍历出来的一级菜单的连接地址。 7             parent.leftFrame.location.href=http://www.mamicode.com/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=http://www.mamicode.com/"<%=request.getContextPath() %>/master/main.jsp" target="_parent"><img src=http://www.mamicode.com/"<%=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=http://www.mamicode.com/<%=request.getContextPath() %>${powers.sysPowerUrl }=${powers.sysPowerId} id="turnto${vars.count }" target="leftFrame" class="selected"><img src=http://www.mamicode.com/"<%=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