父html下方导航栏动态渲染

index.html

@@ -39,6 +39,7 @@
             background-color: #fdfdfd;
             box-shadow: 0 -2px 10px 0 rgb(0 0 0 / 10%);
             display: grid;
+            /* grid-template-columns: repeat(3, 1fr); */
             place-items: center;
         }
 
@@ -72,31 +73,56 @@
         <div id="iframe-container">
             <!-- <iframe src="html/weibo.html" frameborder="0"></iframe> -->
         </div>
-        <div id="float-container" class="bt" style="grid-template-columns: repeat(3, 1fr);">
+        <div id="float-container" class="bt">
-            <div class="navbar-item" targetPage="weibo_hotband">
+            <!-- <div class="navbar-item" targetPage="weibo_hotband">
                 <img class="navbar-image" src="./html/assets/image/weibo.svg" />
                 <p class="navbar-title">微博热搜</p>
-            </div>
+            </div> -->
-            <div class="navbar-item" targetPage="bilibili_rank">
-                <img class="navbar-image" src="./html/assets/image/icon_rank.png" />
-                <p class="navbar-title">B站排行</p>
-            </div>
-            <div class="navbar-item" targetPage="bilibili_hotband">
-                <img class="navbar-image" src="./html/assets/image/bilibili.svg" style="transform: scale(0.87);" />
-                <p class="navbar-title">B站热搜</p>
-            </div>
         </div>
     </div>
     <script>
-        let pages = ['weibo_hotband', 'bilibili_rank', 'bilibili_hotband'];
+        let pages = {
-
+            'weibo_hotband': {
+                title: '微博热搜',
+                // url: 'html/weibo_hotband.html',
+                icon: './html/assets/image/weibo.svg',
+                icon_scale: 1,
+            },
+            'bilibili_rank': {
+                title: 'B站排行',
+                // url: 'html/bilibili_rank.html',
+                icon: './html/assets/image/icon_rank.png',
+                icon_scale: 1,
+            },
+            'bilibili_hotband': {
+                title: 'B站热搜',
+                // url: 'html/bilibili_hotband.html',
+                icon: './html/assets/image/bilibili.svg',
+                icon_scale: 0.87,
+            },
+        };
+        // 渲染导航栏
+        for (let key in pages) {
+            let page = pages[key];
+            let navbarItem = document.createElement('div');
+            navbarItem.className = 'navbar-item';
+            navbarItem.setAttribute('targetPage', key);
+            navbarItem.innerHTML = `
+                <img class="navbar-image" src="${page.icon}" ${page.icon_scale != 1 ? `style="transform: scale(${page.icon_scale});"` : ''} />
+                <p class="navbar-title"> ${page.title}</p>
+            `;
+            document.getElementById('float-container').style.gridTemplateColumns = `repeat(${Object.keys(pages).length}, 1fr)`;
+            document.getElementById('float-container').appendChild(navbarItem);
+        }
+    </script>
+    <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;
+                if (item.classList.contains('active')) return;
 
                 navbarItems.forEach(item => {
                     item.classList.remove('active');
@@ -131,8 +157,8 @@
             // 获取 url 中的 target 参数
             let url = new URL(window.location.href);
             let target = url.searchParams.get('target');
-            if (!pages.includes(target)) {
+            if (!Object.keys(pages).includes(target)) {
-                target = 'weibo';
+                target = 'weibo_hotband';
                 history.replaceState(null, null, `./index.html?target=${target}`);
             }
             // 切换页面