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

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

news 2026/2/7 13:34:55

首先是原版三层框架的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＞的问题以及解决办法

首先是原版三层框架的html&#xff1a; <html> <head> <title>THPWP</title> </head> <!-- 切记frameset不能写在body里面&#xff0c;以下代表首页由三层模块组成&#xff0c;其中第一层我是用来放菜单高度占比14%&#xff0c;中间的用作主…...

编程日记 2023/5/1 1:02:18

Verilog中的`define与`if的使用

一部分代码可能有时候用&#xff0c;有时候不用&#xff0c;为了避免全部编译占用资源&#xff0c;可以使用条件编译语句。 语法 // Style #1: Only single ifdef ifdef <FLAG>// Statements endif// Style #2: ifdef with else part ifdef <FLAG>// Statements …...

编程日记 2023/5/1 0:57:17

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

1、listing的相关性&#xff1a;前期我们在找词&#xff0c;收集词的时候&#xff0c;我们通过插件来协助我们去筛选词。我们把流量高&#xff0c;中&#xff0c;低的关键词都一一收集&#xff0c;然后我们再进行对收集得来的关键词进行分析&#xff0c;再进行挑词&#xff0c;…...

编程日记 2023/5/1 0:52:15

静态分析和动态分析

在开发早期&#xff0c;发现并修复bug在许多方面都有好处。它可以减少开发时间&#xff0c;降低成本&#xff0c;并且防止数据泄露或其他安全漏洞。特别是对于DevOps&#xff0c;尽早持续地将测试纳入SDLC软件开发生命周期是非常有帮助的。 这就是动态和静态分析测试的用武之地…...

编程日记 2023/5/1 0:47:14

代码随想录_贪心_leetcode 1005 134

leetcode 1005. K 次取反后最大化的数组和 1005. K 次取反后最大化的数组和 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰好 k 次。可以多次选择同一个下标 i 。 以…...

编程日记 2023/5/31 17:53:08

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

如何取出多维torch指定维度的指定“行” 从二维torch开始新建torch取出某一行取出某一列一次性取出多行取出连续的多行取出不连续的多行 一次取出多列取出连续的多列取出不连续的多列 考虑三维torch取出三维torch的任意两行&#xff08;means 在dim0上操作&#xff09;取出连续…...

编程日记 2023/5/1 0:37:12

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

文章目录 一、安装 remote-ssh 插件二、直接连接三、配置 SSH 公匙&#xff0c;免密登录 一、安装 remote-ssh 插件 点击插件搜索框&#xff0c;搜 remote-ssh&#xff0c;点击安装 安装完成后就会出现下面的图标&#xff1a; 二、直接连接 点击加号&#xff0c;输入 ssh 连接…...

编程日记 2023/5/29 19:24:08

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

AI工具是指一系列人工智能技术和工具&#xff0c;包括机器学习、深度学习、自然语言处理、计算机视觉等。这些工具可以帮助开发人员和数据科学家通过处理和分析海量数据来自动识别和解决问题&#xff0c;提供智能的决策和预测模型。常见的AI工具包括TensorFlow、PyTorch、Keras…...

编程日记 2023/5/1 0:27:10

static 和构造方法

文章目录 static构造方法内存中数据的存储方式示例 static 具体对象的属性&#xff0c;称之为对象属性&#xff0c;成员属性&#xff0c;实例属性。 具体对象的方法&#xff0c;称之为对象方法&#xff0c;成员方法&#xff0c;实例方法。 静态&#xff1a;static 和具体对…...

编程日记 2023/5/1 0:22:09

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

目录 一、EPIT 定时器简介二、定时器按键消抖 一、EPIT 定时器简介 EPIT 的全称是&#xff1a; Enhanced Periodic Interrupt Timer&#xff0c;直译过来就是增强的周期中断定时器&#xff0c;它主要是完成周期性中断定时的。学过 STM32 的话应该知道&#xff0c; STM32 里面的…...

编程日记 2023/5/1 0:17:08

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

Web安全 XSS靶场搭建 XSS又叫CSS&#xff08;Cross Site Script&#xff09;跨站脚本攻击&#xff0c;指的是攻击者在Web页面&#xff0c;插入恶意JS代码&#xff0c;当用户浏览该页之时&#xff0c;嵌入其中JS代码就会被执行&#xff0c;从而达到攻击的目的.&#xff08;包含…...

编程日记 2023/5/1 0:12:07

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

一.单选题&#xff08;共4题,44.4分&#xff09; 1 下列选项中&#xff0c;关于事件的描述错误的是&#xff08;&#xff09; A、 事件指的是可以被JavaScript侦测到的行为 B、 事件驱动程序指的是事件触发后要执行的代码 C、 事件源是指触发的事件 D、 事件的种类称为事件…...

编程日记 2023/5/31 17:54:28

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

1. OpenDDS简介 OpenDDS是OMG数据分发服务(DDS)的一种开源实现&#xff0c;它遵循实时系统v1.2的DDS规范(OMG Document formal/07-01-01)和实时公布/订阅互操作性通信协议v2.1的DDS-RTPS规范(OMG Document formal/2010-11-01)。OpenDDS由OCI公司设计和维护&#xff0c;可从http…...

编程日记 2023/5/1 0:02:05

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

cURL是一个利用URL语法在命令行下工作的文件传输工具&#xff0c;1997年首次发行。它支持文件上传和下载&#xff0c;所以是综合传输工具&#xff0c;但按传统&#xff0c;习惯称cURL为下载工具。cURL还包含了用于程序开发的libcurl。 cURL支持的通信协议有FTP、FTPS、HTTP、H…...

编程日记 2023/5/30 18:18:26

Duboo介绍与入门

文章目录 1、Dubbo的前世今生2、Dubbo的快速入门2.1、Dubbo的基本架构2.2、Nacos2.3、管理后台2.4、入门案例2.4.1、服务提供者搭建环境代码实现配置文件 2.4.2、服务消费者搭建环境代码实现配置文件 最后说一句 1、Dubbo的前世今生 2011年10月27日&#xff0c;阿里巴巴开源了…...

编程日记 2023/4/30 23:52:03

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

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能中(Pytorch)框架下模型训练效果的提升方法。随着深度学习技术的快速发展&#xff0c;越来越多的应用场景需要建立复杂的、高精度的深度学习模型。为了实现这些目标&#xff0c;必须采用一系列复杂的技术来提…...

编程日记 2023/4/30 23:47:01

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

目录 一、完成摄像头的调用 二、利用python调用opencv库函数对图像进行处理 2.1 图像处理大体流程 2.2 opencv调用函数的参数以及含义 2.2.1 ret, img cap.read() 读取帧图像 2.2.2 cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) 灰度图像 2.2.3 gray_diff_img cv2.absdiff(g…...

编程日记 2023/4/30 23:42:00

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

0前言 参数类型&#xff08;Parameters&#xff09;指的是函数参数在调用时所具有的性质&#xff0c;从而对函数的调用方式产生影响。在 C 语言中&#xff0c;存在三种不同类型的函数参数&#xff1a;Parameters(in)、Parameters(out) 和 Parameters(inout) 1定义 Parameter…...

编程日记 2023/4/30 23:36:59

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

命令格式 jstat [Options] pid [interval] [count] 参数说明&#xff1a; Options&#xff0c;选项&#xff0c;一般使用 -gc、-gccapacity查看gc情况 pid&#xff0c;VM的进程号&#xff0c;即当前运行的java进程号 interval&#xff0c;间隔时间(按该时间频率自动刷新当前内存…...

编程日记 2023/4/30 23:31:58

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

画笔Graphics Java中提供了Graphics类&#xff0c;他是一个抽象的画笔&#xff0c;可以在Canvas组件(画布)上绘制丰富多彩的几何图和位图。 Graphics常用的画图方法如下&#xff1a; drawLine(): 绘制直线drawString(): 绘制字符串drawRect(): 绘制矩形drawRoundRect(): 绘制…...

编程日记 2023/6/1 3:20:10

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/5 10:34:36

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2026/2/1 6:30:04

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2026/1/24 14:43:35

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2026/1/26 3:45:28

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

编程新知 2025/9/14 12:09:11

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

编程新知 2025/9/18 4:17:51

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

编程新知 2026/2/4 16:40:55

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

编程新知 2026/2/6 5:43:28