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的更多相关文章

  1. 用户未登录或Session超时时重定向到登录页,不那么简单

    在网站开发中,我们经常有这样的场景出现: 情景1:对未登录的用户或没有权限的用户,当其想访问某个受限网页时,系统要能够自动转到登录页面.   情景2:对于用session保存用户状态的情况还有这样一种 ...

  2. “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇（数据库结构、登录窗口、以及主界面）

    “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构.登录窗口.以及主界面) 一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增 ...

  3. 后台跳转到登录页嵌套在iframe的问题（MVC例）

    //首页 public ActionResult Index() { if (!Request.IsAuthenticated) //判断权限,没有登录就跳回登录页 {string url = Url ...

  4. Exploit Kit——hacker入侵web，某iframe中将加载RIG EK登录页面，最终下载并执行Monero矿工

    RIG Exploit Kit使用PROPagate注入技术传播Monero Miner from:https://www.4hou.com/technology/12310.html 导语:Fire ...

  5. iframe中的jquery ui modal dialog 覆盖父窗口

    在iframe中 使用jquery ui dialog,弹出后可以覆盖父窗体 ///iframe中的jquery ui modal dialog 覆盖父窗口 function openDialog() ...

  6. 2015.12.14 MDI(多文档窗口结构)设置基本解决，折腾一天，部分解决存在已久的问题。但效果仍不如临时航线的MDI窗体结构。

    创建从一个窗口弹出多个子窗口的结构叫MDI窗体结构 如果不按MDI结构管理,最简单的做法是: 在窗体A上添加菜单或按钮,在菜单或按钮事件中添加弹出B窗体代码: B b = new B(); b.sho ...

  7. Asp.net MVC访问框架页中嵌套的iframe页面时，如果session或cookie过期，登录验证超时怎样自动跳转到登录页

    一般登录验证的过滤器中,使用验证过滤器的Redirect方法,将请求重定向到指定的URL.但是如果我们要访问的页面是一个嵌套在框架页中的iframe页面时,这种重定向只会对iframe页面凑效,也就是 ...

  8. session过期，登录页被内嵌iframe的解决方案

    在登录页的js加上: if(window !=top){ top.location.href = location.href; } 就可以完美解决这个问题!

  9. JSP注册登录页教程

    转载请标明原文地址:http://www.cnblogs.com/zhangyukof/p/6785258.html  一.准备工作 已搭建好的SSH框架工程一个,如果没有,请参考我的上一篇文章< ...

随机推荐

  1. 洛谷 P3267 - [JLOI2016/SHOI2016]侦察守卫（树形 dp）

    洛谷题面传送门 经典题一道,下次就称这种"覆盖距离不超过 xxx 的树形 dp"为<侦察守卫模型> 我们考虑树形 \(dp\),设 \(f_{x,j}\) 表示钦定了 ...

  2. 洛谷 P5224 - Candies（循环卷积）

    洛谷题面传送门 一道题解长度大概不到 1k 的题,可还是决定写篇题解,因为自己没有做出来( \(1004535809\) 好评( 首先这个 \(\equiv m\pmod{k}\) 有点把我们往单位根 ...

  3. SP20173 DIVCNT2 - Counting Divisors (square)

    Refer 主要思路参考了 Command_block 的题解. Description 给定 \(n\)(\(n\le 10^{10}\)),求 \[\sum_{i=1}^n\sigma_0(i^2 ...

  4. 【Perl示例】整合多个文件

    这个需求是在生信分析中几乎天天用到,各种语言都能实现,也都各有特点.这次以perl为例. 已知 文件CT-VS-CON.All.xls为全部蛋白表达矩阵及其差异分析结果. 文件Homo_sapiens ...

  5. mysql优化方法陈列

    高并发大多的瓶颈在后台,在存储,mysql的正常的优化方案如下: 1)代码中sql语句优化 2)数据库字段优化,索引优化 3)加缓存,redis/memcache等 4)主从,读写分离 5)分区表 6 ...

  6. 学习Vue源码前的几项必要储备（二）

    7项重要储备 Flow 基本语法 发布/订阅模式 ES6+ 语法 原型链.闭包 函数柯里化 event loop 接上讲 聊到了ES6的几个重要语法,加下来到第四点继续开始. 4.原型链.闭包 原型链 ...

  7. 转 onSaveInstanceState()和onRestoreInstanceState()使用详解

    转 https://www.jianshu.com/p/27181e2e32d2 背景 如果系统由于系统约束(而不是正常的应用程序行为)而破坏了Activity,那么尽管实际 Activity实例已经 ...

  8. Spring Boot 创建定时任务（配合数据库动态执行）

    序言:创建定时任务非常简单,主要有两种创建方式:一.基于注解(@Scheduled) 二.基于接口(SchedulingConfigurer). 前者相信大家都很熟悉,但是实际使用中我们往往想从数据库 ...

  9. mysql_取分组后的前几行值

    --方法一: select a.id,a.SName,a.ClsNo,a.Score from Table1 a left join Table1 b on a.ClsNo=b.ClsNo and a ...

  10. Vue API 4 (过渡和动画）

    transition name 用于自动生成 CSS 过渡类名.例如:name: fade 将自动拓展为 .fade-enter ,.fade-enter-active等.默认类名为 "v& ...