使用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>

<!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";
    }
}

posted @ 2021-10-08 11:11 yvioo 阅读(622) 评论(0) 编辑收藏举报

刷新页面返回顶部

yvioo

“你从没有相信过谁吧，这就是你孤身一人的原因”

使用iframe实现上下窗口结构及登录页全窗口展示Demo

公告