当前位置：首页 > news >正文

使用div替代＜frameset＞＜frame＞的问题以及解决办法

news 2025/9/16 15:35:07

首先是原版三层框架的html：

<html>
<head>
<title>THPWP</title>
</head> <!-- 切记frameset不能写在body里面，以下代表首页由三层模块组成，其中第一层我是用来放菜单高度占比14%，中间的用作主体高度占比70%，剩下的底部用于放置友情链接等等占比16% --><frameset rows="14%,70%,16%" cols="*" frameborder="NO" framespacing="0"><frame src="title.jsp" name="topFrame" scrolling="NO" noresize /><frame src="main.jsp" name="mainFrame" scrolling="Yes" noresize/>	  <frame src="link.jsp" name="foot" scrolling="NO" noresize/>	</frameset>
</html>

变更div后：

<html>
<head>
<title>测试替换frame</title>
<style type="text/css">*{margin: 0;padding: 0;}td{text-align: center;}body{text-align:center;background-color:#edf7fd;}td{text-align: center;}.cursorPointer td:hover {  background-color:#e6ff90; cursor: pointer; color: red; }	a{color: #0066FF;}td a:link {text-decoration: none;color: #00527f;font-size: 10px;font-family: Arial,Helvetica,sans-serif;}
</style>
<script>function ajaxtoxx(ur){/*ajaxtoxx方法是用来替代a标签跳转到其中一个frame，例如之前页面的<a href="xxx" target="mainFrame" >XXX</a>，当点击时会在frame名为mainFrame的层中显示返回的页面，但替换frame为div之后就需要使用load方法进行加载了，无论是springMvc还是struts返回页面都可以直接使用load(api接口地址)进行加载，也可以使用ajax访问接口并把返回的页面使用$('#main').html(返回值)进行加载，但是有load这种简单的方法何乐而不为*/$('#main').load(ur);}
</script>
</head><body><div style="height:12%;position: fixed;width: -webkit-fill-available;" id="title"><table style="width:100%"><tr><td><span style="color: #0033FF; font-size: 46px;">LOGO</span></td><td style="text-align: center;"><span style="color: #0066FF; font-size: 40px;">某某系统</span></td><td style="color: black;">用户名 : 管理员 <br> 登入时间 : 2023-04-27<br><a href="pwd.do?txt_uid=${LoginForm.txt_uid}&newpwd=updPwd" target="mainFrame"><strong>修改密码</strong></a></td></tr><tr><td height="30" colspan="3"><table style=" width:100%;background: #bde1bd;" class="cursorPointer"><tr><c:if test="${LoginForm.role !=2}"> <!-- 不是2即不是审核员就显示 --><td width="7%"><a href="baidu.com"><strong style="color: black;">主页</strong></a></td><td width="8.3%"  onclick='ajaxtoxx("https://translate.google.com.hk")'>XXX</a></td></c:if><c:if test="${LoginForm.role !=0}">  <!-- 操作日志只有管理员与审核人员才能看 ，普通用户不能看 --><td width="8%"><a href="https://translate.google.com.hk/" target="_blank" style="font-weight: 900;color:#f57100">操作日志</a></td></c:if><td width="8%"><a href="Logout.do" target="_parent" style="color:red"><strong>注销</strong></a></td></tr></table></td></tr></table></div><c:if test="${LoginForm.role !=2}"> <!-- 不是2即不是审核员就显示 --><div style="position: absolute;top: 12%;bottom: 12%;width: -webkit-fill-available;overflow-y: auto;" id="main" class="cursorPointer"> <!--top与bottom都是12意思是除了菜单与链接外的空间全是main的  -->主体内容</div><hr><div style="height: 12%;position: fixed;width: -webkit-fill-available;bottom: 0px;" class="cursorPointer">尾部</div></c:if></body>
</html>

重点：

1. 替换后最重要的就是a标签指定刷新哪个frame需要更改为$('#main').load(链接)，其他倒没有什么，如果不把frame改成div就会经常出现frame中某些内容重复生成或者不显示，特别恶心

2.如果其他a标签点击跳转的子页面出现以下内容：

<script language="JavaScript">opener.parent.xxx(); //调用父窗口的方法（父模块必须是frame否则无效）
</script>

window.opener是当前页面A通过open方法弹出一个窗口B，那在B页面上 window.opener就是A
window.parent是当前页面C通过location.href转到新的页面D，那在D页面上window.parent就是B
或者是页面E里套一个frame为F，那F页面的window.parent就是E，

opener
在当前窗口创建子窗口，可能需要从子窗口引用父窗口，因此就有了opener的存在。

opener即谁打开我的，比如A页面利用window.open弹出了B页面窗口，那么A页面所在窗口就是B页面的opener，在B页面通过opener对象可以访问A页面。

parent
在当前窗口中包含frame框架，在一组框架集中，子框架访问父框架时，就需要parent来访问。

parent表示父窗口，比如一个A页面利用iframe或frame调用B页面，那么A页面所在窗口就是B页面的parent。

综上所述，opener是负责窗口之间父子关系，parent是负责框架间父子关系。

使用div替代＜frameset＞＜frame＞的问题以及解决办法

相关文章：

使用div替代＜frameset＞＜frame＞的问题以及解决办法

Verilog中的`define与`if的使用

沃尔玛、亚马逊影响listing的转化率4大因素，测评补单自养号解析

静态分析和动态分析

代码随想录_贪心_leetcode 1005 134

笔记：对多维torch进行任意维度的多“行”操作

【VSCode】1、VSCode 如何连接服务器

AI工具：通过智能实现工作和学习效率的革命化

static 和构造方法

【Linux 裸机篇（八）】I.MX6U EPIT 定时器中断、定时器按键消抖

Web安全 XSS靶场搭建（玩转整个XSS环境.）

前端开发技术——DOM（上）

银河麒麟v10服务器版安装OpenDDS

curl方式调用电商API接口示例详细介绍

Duboo介绍与入门

人工智能中(Pytorch)框架下模型训练效果的提升方法

树莓派CSI摄像头使用python调用opencv库函数进行运动检测识别

Parameters(in)、Parameters(out) and Parameters(inout)

jstat命令查看jvm内存情况及GC内存变化

java 图形化小工具Abstract Window Toolit ：画笔Graphics，画布Canvas()，弹球小游戏

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

逻辑回归：给不确定性划界的分类大师

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

镜像里切换为普通用户

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

【JavaSE】绘图与事件入门学习笔记

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

Reasoning over Uncertain Text by Generative Large Language Models

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度