对于web系统的开发，尤其是网站的建设，大部分需要使用到框架技术，其实这个框架技术已经推出来了很多年，但是对于我这个菜鸟来说还是有点陌生，今天就遇到了麻烦，我在利用js对框架进行操控，结果总是不尽如人意。现在把得到的经验与各位分享，欢迎前辈级别的高手批评指教。
新建框架。
main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mainFrames</title>
</head>
<frameset rows="30%,40%,30%" cols="" border="1" frameborder="yes" >
<frame src="a.jsp" name="topFrame" scrolling="No" noresize="noresize" id="frames1" />
<frame src="b.jsp" name="mainFrame" scrolling="No" noresize="noresize" id="frames2" />
<frame src="c.jsp" name="bottomFrame" scrolling="No" noresize="noresize" id="frames3" />
<noframes>
<body>
<p>This page uses frames. The current browser you are using does not support frames.</p>
</body>
</noframes>
</frameset>
</html>
a.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./js/system.js"></script>
<title>a.jsp</title>
</head>
<body bgcolor="#F3f3f3">
<a onclick="loginC()" href="#" id="b">b.jsp</a><br>
<a onclick="loginB()" href="#" id="c">c.jsp</a><br>
<a onclick="loginA()" href="#" id="c">a 和 b </a><br/>
<center>
利用js对框架进行控制
</center>
</body>
</html>
b.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./js/system.js"></script>
<title>b.jsp</title>
</head>
<body bgcolor="#fed342">
this is b.jsp!
<a id="a" onclick="test()" href="#">a.jsp</a>
</body>
</html>
c.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>c.jsp</title>
</head>
<body bgcolor="#565321">
this is c.jsp
</body>
</html>
system.js
function loginA(){
alert("把B和C框架同时改变");
parent.mainFrame.location.href("c.jsp");
parent.bottomFrame.location.href("b.jsp");
}
function loginC(){
alert("把B框架的b.jsp换成c.jsp");
parent.mainFrame.location.href("c.jsp");
}
function loginB() {
alert("把C框架的c.jsp换成b.jsp");
window.parent.frames["bottomFrame"].location.href("b.jsp");
}
主要在于自己的js没有学过，很多js的内置对象或者为函数自己都。
对于框架的跳转可以为：
1:window.parent.frames["需要修改的框架"].location.href("跳转的路径");
2:window.parent.frames.item(框架在框架集数组中存放的位置).location.href("跳转的路径");
3：window.parent.frames.item("需要修改的框架 此为框架名称").location.href("跳转路径");
4：window.parent.框架名称.location.href("跳转路径");
5：window.parent["框架名称"].location.href("跳转路径");
6:window.parent.frames.框架名称.location.href("跳转路径");
分享到：
相关推荐
对于包含多个框架的页面，可以通过JavaScript来控制某个框架的刷新。 1. **刷新包含该框架的页面** - **示例代码**： ```javascript parent.location.reload(); ``` 2. **子窗口刷新父窗口** - **示例代码**...
window.scrollTo方法允许开发者直接指定滚动目标的位置，可以精确控制滚动条的水平和垂直位置。 示例代码如下： ```javascript function scrollWindow() { window.scrollTo(100, 500); } ``` 该方法实现起来十分...
JavaScript（简称JS）是一种轻量级的脚本语言，广泛应用于网页和网络应用开发中，包括页面交互、数据处理和用户界面控制等。在本文中，我们将深入探讨JS中的页面跳转和刷新技术。 首先，JS提供了一些方法来实现页面...
本文介绍了网络课件框架页面同步刷新与自动翻页实现原理，讨论了使用ASP语言连接、访问Access数据库的方法，叙述了利用Windows消息和自定义函数功能，结合ASP、Access数据库及JavaScript编程技术中框架页面参数传递...
在这个话题中，我们将深入探讨JavaScript在网站设计中的应用，以及如何利用框架和Ajax技术实现无刷新页面更新。 JavaScript是一种客户端脚本语言，它在用户的浏览器上运行，无需服务器参与即可执行任务，如验证表单...
这种技术基于JavaScript和相关的前端框架，如jQuery、Vue.js或React.js等。通过AJAX（异步JavaScript和XML）技术，我们可以向服务器发送请求，获取数据，并在当前页面上动态更新内容，实现对话框的弹出。例如，用户...
各种js页面跳转代码 在Web开发中，页面跳转是非常常见的操作，JavaScript提供了多种方式来实现页面跳转。在本文中，我们将总结多种JavaScript页面跳转代码，包括使用window.location.href、window.history.back、...
在JavaScript（JS）中，页面跳转是一种常见的操作，它涉及到网页内容的更新或导航到新的URL。在处理JS跳转问题时，我们通常会遇到几种常见情况，如使用`window.location`对象、`location.href`、`a`标签的`onclick`...
Javascript 页面跳转和刷新的常用代码整理 Javascript 是一种广泛应用于网页开发的脚本语言，它可以实现网页的动态交互和页面跳转。下面我们将对 Javascript 实现页面跳转和刷新的常用代码进行整理。 页面刷新 ...
在本文中，我们将介绍 JavaScript 页面跳转常用代码，包括页面刷新、自动刷新、自动跳转、框架刷新、子窗口刷新和页面关闭等。 页面刷新 JavaScript 中有多种方式可以实现页面刷新，包括： 1. `history.go(0)` 2....
这种技术的核心是利用Ajax（Asynchronous JavaScript and XML）异步通信，配合各种前端框架如jQuery、Vue.js、React或Angular等，以及后端的MVC（Model-View-Controller）设计模式来实现。 首先，"无刷新"是指用户...
如果使用Vue.js、React或Angular等单页应用框架，页面的刷新会被这些框架内部处理，它们通常有内置的机制来管理状态和路由，防止数据丢失。 综上所述，实现JavaScript防刷新功能涉及多个方面，根据具体需求选择...
通过JavaScript可以非常灵活地控制页面的导航逻辑，无论是打开新的窗口、跳转到指定页面还是处理复杂的导航历史，JavaScript都能提供强大的支持。本文将对JS页面跳转的各种方式进行详细介绍，并分析它们之间的差异及...
总结来说，这个Ajax三级无刷新级联实例是一个实用的Web开发示例，展示了如何使用JavaScript和Ajax技术实现高效、动态的数据交互，同时通过级联效果提高了用户操作的便利性。`CallBackObject.js`作为一个简易的Ajax...
在JavaScript中实现页面跳转与刷新是前端开发中的常见需求，用于控制用户在浏览器中的导航行为。页面跳转是指从当前页面跳转到指定的新页面，而页面刷新则是重新加载当前页面。以下是几种主要的实现方式： 1. `...
在JavaScript（JS）中，页面刷新是常见的操作，主要用于更新页面内容或重新加载页面数据。在Web开发中，我们有时需要实现自动刷新、特定条件下刷新、或者通过子窗口控制父窗口的刷新。以下是对这些方法的详细介绍： ...
在现代网页设计和开发中，Layui作为一个流行的前端UI框架，它的使用日益广泛。它基于jQuery，提供了一整套的解决方案，包括模块化、可定制的界面组件，使得网页开发更加快捷、高效。Layui的tab组件是该框架中非常...
jsp返回上一页和刷新是一种常见的jsp开发需求，本文总结了一些常用的jsp返回上一页和刷新的方法，包括使用JavaScript返回上一页和刷新页面、自动刷新页面、ASP.NET输出刷新父窗口脚本语句、JS刷新框架的脚本语句等。
本文将详细介绍如何使用JavaScript（简称JS）来实现页面的自动刷新，并探讨各种不同的刷新场景。 #### 二、基本原理与方法 自动刷新可以通过多种方式实现，下面我们将逐一介绍这些方法： ##### 1. 定时刷新当前...
DWZ JavaScript RIA框架是一款专为构建富互联网应用程序（Rich Internet Applications，简称RIA）而设计的前端开发框架...通过"dwz-demo"中的示例学习，开发者能够掌握如何利用DWZ框架来提升Web应用的性能和用户体验。