使用iframe实现上下窗口结构及登录页全窗口展示Demo
iframe.html 首页
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>首页</title>
<meta http-equiv="Cache-Control" content="no-store"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<style>
html,body{
width: 100%;
height: 100%;
padding:0;
margin:0;
}
#contentTop{
width: 100%;
height: 70px;
padding:0;
margin:0;
} #contentMain{
width: 100%;
height: calc(100% - 81px);
padding:0;
margin:0;
}
</style>
<body>
<iframe id="contentTop" frameborder="0" th:src="@{/top}" >
你不支持iframe
</iframe>
<iframe id="contentMain" name="contentMain" frameborder="0" th:src="@{/index}" >
你不支持iframe
</iframe>
</body> </html>
top.html 上面导航页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是上面菜单导航</title>
</head>
<body>
<div>
我是上面菜单导航
</div>
<!--target：表示在<iframe name="contentMain"></iframe> 中打开-->
<a th:href="@{/main?s=0}" target="contentMain">需要登录</a>
<a th:href="@{/main}" target="contentMain">不需要登录</a>
</body>
</html>
index.html 下面的主要内容页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是内容</title>
</head>
<style>
/*不显示滚动条*/
body::-webkit-scrollbar {
display: none;
}
</style>
<body>
<div >
我是主窗口
</div>
<div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div>
<div >
我是主窗口
</div>
<div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div><div >
我是主窗口
</div>
</body>
</html>
main.html 跳转的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是跳转页面</title>
</head>
<body>
<div>
我是跳转页面
</div>
<div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div> <div>
我是跳转页面
</div>
</body> </html>
login.html 登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页</title>
</head>
<body>
<div>
我是登录,要全窗口显示
</div>
</body> <script type="text/javascript">
/**
* 登录页面 全窗口展示
*/
window.onload = function () {
if (top.location.href != location.href) {
top.location.href = location.href;
}
}
</script>
</html>
页面的href使用了Thymeleaf框架 只是做链接的跳转而已
后端代码（后端用java 只是做简单的页面跳转而已）
package com.example.demo.controller; import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping; /**
* @author
* @date 2021/10/08
*/
@Controller
public class IFrameController { @RequestMapping(value = "/frame")
public String frame(String s) {
return "iframe";
} @RequestMapping(value = "/top")
public String top(String s) {
return "top";
} @RequestMapping(value = "/index")
public String indexHtml(String s) {
return "index";
} @RequestMapping(value = "/main")
public String main(String s) {
if ("0".equalsIgnoreCase(s)){
return "login";
}
return "main";
}
}
使用iframe实现上下窗口结构及登录页全窗口展示Demo的更多相关文章
- 用户未登录或Session超时时重定向到登录页,不那么简单
在网站开发中,我们经常有这样的场景出现: 情景1:对未登录的用户或没有权限的用户,当其想访问某个受限网页时,系统要能够自动转到登录页面. 情景2:对于用session保存用户状态的情况还有这样一种 ...
- “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇（数据库结构、登录窗口、以及主界面）
“MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构.登录窗口.以及主界面) 一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增 ...
- 后台跳转到登录页嵌套在iframe的问题（MVC例）
//首页 public ActionResult Index() { if (!Request.IsAuthenticated) //判断权限,没有登录就跳回登录页 {string url = Url ...
- Exploit Kit——hacker入侵web，某iframe中将加载RIG EK登录页面，最终下载并执行Monero矿工
RIG Exploit Kit使用PROPagate注入技术传播Monero Miner from:https://www.4hou.com/technology/12310.html 导语:Fire ...
- iframe中的jquery ui modal dialog 覆盖父窗口
在iframe中 使用jquery ui dialog,弹出后可以覆盖父窗体 ///iframe中的jquery ui modal dialog 覆盖父窗口 function openDialog() ...
- 2015.12.14 MDI(多文档窗口结构)设置基本解决，折腾一天，部分解决存在已久的问题。但效果仍不如临时航线的MDI窗体结构。
创建从一个窗口弹出多个子窗口的结构叫MDI窗体结构 如果不按MDI结构管理,最简单的做法是: 在窗体A上添加菜单或按钮,在菜单或按钮事件中添加弹出B窗体代码: B b = new B(); b.sho ...
- Asp.net MVC访问框架页中嵌套的iframe页面时，如果session或cookie过期，登录验证超时怎样自动跳转到登录页
一般登录验证的过滤器中,使用验证过滤器的Redirect方法,将请求重定向到指定的URL.但是如果我们要访问的页面是一个嵌套在框架页中的iframe页面时,这种重定向只会对iframe页面凑效,也就是 ...
- session过期，登录页被内嵌iframe的解决方案
在登录页的js加上: if(window !=top){ top.location.href = location.href; } 就可以完美解决这个问题!
- JSP注册登录页教程
转载请标明原文地址:http://www.cnblogs.com/zhangyukof/p/6785258.html 一.准备工作 已搭建好的SSH框架工程一个,如果没有,请参考我的上一篇文章< ...
随机推荐
- 带你了解Typescript的14个基础语法
摘要:Typescript可以说是JavaScript的超集,在JS的基础上新增了许多语法特性,使得类型不再可以随意转换,能大大减少开发阶段的错误. 本文分享自华为云社区<Typescript基 ...
- CF1437G Death DBMS
题面传送门. 题意简述:给出 \(n\) 个字符串 \(s_i\),每个 \(s_i\) 初始权值为 \(0\).\(q\) 次操作:修改 \(s_i\) 的权值:查询给出字符串 \(q\) 能匹配的 ...
- UVA12267 Telephone Network
UVA12267 Telephone Network nb tea. 注意到如果两个需要相互接通的请求 \(a,b\) 在某一层分别接了上下两个开关,那么接下来它们永远也无法接通了,因为上下两个开关是 ...
- MAFFT 进行多序列比对
简介 最经典和广为熟知的多序列比对软件是 clustalw . 但是现有的多序列比对软件较多,有文献报道:比对速度(Muscle>MAFFT>ClustalW>T-Coffee),比 ...
- Yii自定义全局异常，接管系统异常
Yii自定义全局异常,接管系统异常 一般自己的框架都会使用一些自己封装的全局异常,那么在系统发生异常突发情况时候,即可自主的做一些异常机制处理,例如发送短信.发送邮件通知系统维护人员或者以更加友好的方 ...
- 远程登录Linux系统及上传下载文件
目录 1. 远程登录Linux系统 1.1 为什么要远程登录 1.2 Xshell6安装 1.3 连接登录 1.3.1 连接前提 1.3.2 Xshell连接配置 2. 远程上传下载文件 2.1 Xf ...
- Elasticsearch中关于transform的一个问题？
背景:现在有一个业务,派件业务,业务员今天去派件(扫描产生一条派件记录),派件可能会有重复派件的情况,第二天再派送(记录被更新,以最新的派件操作为准).现在需要分业务员按天统计每天的派件数量.es版本 ...
- 大数据学习day21-----spark04------1. 广播变量 2. RDD中的cache 3.RDD的checkpoint方法 4. 计算学科最受欢迎老师TopN
1. 广播变量 1.1 补充知识(来源:https://blog.csdn.net/huashetianzu/article/details/7821674) 之所以存在reduce side jo ...
- 零基础学习java------day27-28---------电影评分数据案例，. RPC案例
一. 电影评分数据案例 movie:电影id rate:用户评分 timeStamp:评分时间 uid:用户id 简化数据: 需求: (1)每个用户评分最高的3部电影 (2)每个用户评分的平均值 ( ...
- 【swift】用Xib实现自定义警告框（Alert）（安卓叫法：Dialog对话框）
在写这篇博客前,先感谢两篇博客 [如何自定义的思路]:https://www.cnblogs.com/apprendre-10-28/p/10507794.html [如何绑定Xib并且使用]:htt ...