使用iframe實現上下視窗及登入頁全視窗展示效果
阿新 • • 發佈：2021-10-08
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"; } }-----------------------有任何問題可以在評論區評論，也可以私信我，我看到的話會進行回覆，歡迎大家指教------------------------ （藍奏雲官網有些地址失效了，需要把請求地址lanzous改成lanzoux才可以）