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

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

news 2025/12/21 8:57:48

首先是原版三层框架的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()，弹球小游戏

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

linux之kylin系统nginx的安装

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

STM32标准库-DMA直接存储器存取

高危文件识别的常用算法：原理、应用与企业场景

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

智能AI电话机器人系统的识别能力现状与发展水平

解读《网络安全法》最新修订，把握网络安全新趋势

关于uniapp展示PDF的解决方案

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率：以冒泡排序为例