From c062151ea32ab16f25e12c58e5f20aaddc915366 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E5=B0=8F=E5=A2=A8?=
 <2291200076@qq.com>
Date: Fri, 29 Jul 2022 14:44:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=BD=E7=A6=BBhtml=E5=85=AC=E5=85=B1?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=9B=E5=A5=97=E5=A3=B3=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=8D=E5=88=B7=E6=96=B0=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E9=A1=B5=E9=9D=A2=EF=BC=8C=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?url=20target=E5=8F=82=E6=95=B0=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 html/assets/css/main.css | 24 ++++++++++++++++
 html/bilibili.html       | 23 +--------------
 html/weibo.html          | 27 +----------------
 index.html               | 62 +++++++++++++++++++++++++++++++++++++---
 4 files changed, 84 insertions(+), 52 deletions(-)
 create mode 100644 html/assets/css/main.css
diff --git a/html/assets/css/main.css b/html/assets/css/main.css
new file mode 100644
index 0000000..a2c74fd
--- /dev/null
+++ b/html/assets/css/main.css
@@ -0,0 +1,24 @@
+#list {
+  width: 100%;
+  text-align: center;
+  border-spacing: 0;
+  border: 0.4px solid black;
+}
+
+#list tr {
+  height: min(1.85rem, 50px);
+}
+
+#list td {
+  margin: 0;
+  border: 0.4px solid black;
+}
+
+/* 热搜的 label 样式 */
+.hotband-label {
+  color: white;
+  padding: 3px;
+  border-radius: 6px;
+  font-size: 10px;
+  display: inline-block;
+}
diff --git a/html/bilibili.html b/html/bilibili.html
index f698d7a..12a4aac 100644
--- a/html/bilibili.html
+++ b/html/bilibili.html
@@ -6,32 +6,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>B站热搜</title>
+    <link rel="stylesheet" href="./assets/css/main.css">
     <style>
-        #list {
-            width: 100%;
-            text-align: center;
-            border-spacing: 0;
-            border: 0.4px solid black;
-        }
-
-        #list tr {
-            height: min(1.85rem, 50px);
-        }
-
         #list td {
-            margin: 0;
-            border: 0.4px solid black;
             font-size: 14px;
         }
-
-        /* 热搜的 label 样式 */
-        .hotband-label {
-            color: white;
-            padding: 3px;
-            border-radius: 6px;
-            font-size: 10px;
-            display: inline-block;
-        }
     </style>
 </head>
 
diff --git a/html/weibo.html b/html/weibo.html
index 3c21e8b..275ceb2 100644
--- a/html/weibo.html
+++ b/html/weibo.html
@@ -6,32 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>微博热搜</title>
-    <style>
-        #list {
-            width: 100%;
-            text-align: center;
-            border-spacing: 0;
-            border: 0.4px solid black;
-        }
-
-        #list tr {
-            height: min(1.85rem, 50px);
-        }
-
-        #list td {
-            margin: 0;
-            border: 0.4px solid black;
-        }
-
-        /* 热搜的 label 样式 */
-        .hotband-label {
-            color: white;
-            padding: 3px;
-            border-radius: 6px;
-            font-size: 10px;
-            display: inline-block;
-        }
-    </style>
+    <link rel="stylesheet" href="./assets/css/main.css">
 </head>
 
 <body>
diff --git a/index.html b/index.html
index deedc9d..abfc0b2 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,7 @@
             height: 100%;
         }
 
+        .iframe-container,
         iframe {
             width: 100%;
             height: 100%;
@@ -69,13 +70,15 @@
 
 <body>
     <div class="container">
-        <iframe src="html/weibo.html" frameborder="0" style=""></iframe>
+        <div id="iframe-container">
+            <!-- <iframe src="html/weibo.html" frameborder="0"></iframe> -->
+        </div>
         <div id="float-container" class="bt">
-            <div class="navbar-item active" targetPage="html/weibo.html">
+            <div class="navbar-item" targetPage="weibo">
                 <img class="navbar-image" src="./html/assets/image/weibo.svg" />
                 <p class="navbar-title">微博</p>
             </div>
-            <div class="navbar-item" targetPage="html/bilibili.html">
+            <div class="navbar-item" targetPage="bilibili">
                 <img class="navbar-image" src="./html/assets/image/bilibili.svg" style="transform: scale(0.84);" />
                 <p class="navbar-title">B站</p>
             </div>
@@ -83,16 +86,67 @@
     </div>
     <script>
         let navbarItems = document.querySelectorAll('.navbar-item');
+        let iframeContainer = document.querySelector('#iframe-container');
         let iframe = document.querySelector('iframe');
         navbarItems.forEach(item => {
             item.addEventListener('click', () => {
+                // 已选中项再次点击，不执行操作
+                if(item.classList.contains('active')) return;
+
                 navbarItems.forEach(item => {
                     item.classList.remove('active');
                 });
                 item.classList.add('active');
-                iframe.src = item.getAttribute('targetPage');
+
+                let target = item.getAttribute('targetPage');
+                switchPage(target, true);
             });
         });
+
+        // 切换页面
+        // 传入参数：目标页面，是否更新网址
+        function switchPage(target, pushState) {
+            let url = `html/${target}.html`;
+            if (pushState) {
+                // 更新url但不刷新页面
+                history.pushState(null, null, `./index.html?target=${target}`);
+            }
+
+            // iframe 进入新页面
+            if (iframe)
+                iframe.remove();
+            iframe = document.createElement('iframe');
+            iframe.src = url;
+            iframe.setAttribute('frameborder', '0');
+            iframeContainer.appendChild(iframe);
+        }
+
+        // 根据 URL 参数切换页面
+        function locationToPageByUrlParam() {
+            let pages = ['weibo', 'bilibili'];
+            // 获取 url 中的 target 参数
+            let url = new URL(window.location.href);
+            let target = url.searchParams.get('target');
+            if (!pages.includes(target)) {
+                target = 'weibo';
+                history.replaceState(null, null, `./index.html?target=${target}`);
+            }
+            // 切换页面
+            switchPage(target, false);
+            // 更新下方导航栏选中状态
+            navbarItems.forEach(item => {
+                if (item.getAttribute('targetPage') === target) {
+                    item.classList.add('active');
+                }
+            });
+        }
+
+        window.addEventListener("popstate", function (e) {
+            console.log("浏览器返回事件", e);
+            locationToPageByUrlParam();
+        }, false);
+
+        locationToPageByUrlParam();
     </script>
 </body>
 
