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

简介: top:永远指分割窗口最高层次的浏览器窗口;parent:包含当前分割窗口的父窗口,本文将围绕js中top、parent、frame进行讲述及他们的应用案例 引用方法top: 该变量永远指分割窗口最高层次的浏览器窗口。

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

 

 

 

 



相关文章
|
5天前
|
资源调度 前端开发 JavaScript
Babel:JavaScript代码的编译利器
Babel:JavaScript代码的编译利器
|
5天前
|
JavaScript 前端开发 安全
抽象语法树(AST):理解JavaScript代码的抽象语法树
抽象语法树(AST):理解JavaScript代码的抽象语法树
|
5天前
|
存储 JavaScript 前端开发
掌握值类型和引用类型,让你的JavaScript代码更上一层楼!
掌握值类型和引用类型,让你的JavaScript代码更上一层楼!
|
6天前
|
资源调度
在 Next.js 中使用自定义服务器框架进行服务器端渲染
在 Next.js 中使用自定义服务器框架进行服务器端渲染
Next.js 的服务器端渲染框架集成
Next.js 的服务器端渲染框架集成
|
6天前
|
前端开发 网络架构 UED
React Next.js框架
React Next.js 是一个基于 React 的服务器渲染框架,用于构建高性能的现代Web应用。它提供内置的服务器渲染、静态导出、动态路由功能,并自动进行代码拆分。Next.js 还支持热模块替换、CSS-in-JS 和客户端路由,拥有丰富的插件生态系统,简化了开发过程,提升了应用的性能和用户体验。
|
6天前
|
移动开发 JavaScript 前端开发
Phaser和Three.js是两个非常流行的JavaScript游戏框架
【5月更文挑战第14天】Phaser是开源的2D游戏引擎,适合HTML5游戏开发,内置物理引擎和强大的图形渲染功能,适用于消消乐等2D游戏。Three.js是基于WebGL的3D库,用于创建3D场景和应用,支持各种3D对象和交互功能,广泛应用于游戏、可视化等领域。选择框架取决于项目需求,2D选Phaser,3D选Three.js。
15 4
|
6天前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
13 3
|
6天前
|
JavaScript 前端开发
JS实现网页页面的框架(demo)
JS实现网页页面的框架(demo)
13 1
|
6天前
|
设计模式 前端开发 JavaScript
AngularJS是一款由Google收购的JavaScript结构框架
【5月更文挑战第2天】AngularJS是Google收购的JavaScript框架,用于构建动态Web应用,基于MVC模式,强调模块化和双向数据绑定。它简化了视图与模型的同步,通过语义化标签和依赖注入提升开发效率。适用于复杂单页面应用(SPA),但不适合DOM操作密集型或性能要求极高的场景。
26 0