首先是原版三层框架的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。