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