coder-xiaomo/tools
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity GitHub Gitee

抽离html公共样式；套壳页面添加不刷新页面切换页面，以及url target参数等

Browse Source
This commit is contained in:
程序员小墨 2022-07-29 14:44:23 +08:00
parent e7692bac65
commit c062151ea3
4 changed files with 84 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
html/assets/css/main.css Normal file
View File

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

23
html/bilibili.html
View File

@ -6,32 +6,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B站热搜</title> <title>B站热搜</title>
<link rel="stylesheet" href="./assets/css/main.css">
<style> <style>
#list {
width: 100%;
text-align: center;
border-spacing: 0;
border: 0.4px solid black;
}
#list tr {
height: min(1.85rem, 50px);
}
#list td { #list td {
margin: 0;
border: 0.4px solid black;
font-size: 14px; font-size: 14px;
} }
/* 热搜的 label 样式 */
.hotband-label {
color: white;
padding: 3px;
border-radius: 6px;
font-size: 10px;
display: inline-block;
}
</style> </style>
</head> </head>

27
html/weibo.html
View File

@ -6,32 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微博热搜</title> <title>微博热搜</title>
<style> <link rel="stylesheet" href="./assets/css/main.css">
#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>
</head> </head>
<body> <body>

62
index.html
View File

@ -25,6 +25,7 @@
height: 100%; height: 100%;
} }
.iframe-container,
iframe { iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -69,13 +70,15 @@
<body> <body>
<div class="container"> <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 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" /> <img class="navbar-image" src="./html/assets/image/weibo.svg" />
<p class="navbar-title">微博</p> <p class="navbar-title">微博</p>
</div> </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);" /> <img class="navbar-image" src="./html/assets/image/bilibili.svg" style="transform: scale(0.84);" />
<p class="navbar-title">B站</p> <p class="navbar-title">B站</p>
</div> </div>
@ -83,16 +86,67 @@
</div> </div>
<script> <script>
let navbarItems = document.querySelectorAll('.navbar-item'); let navbarItems = document.querySelectorAll('.navbar-item');
let iframeContainer = document.querySelector('#iframe-container');
let iframe = document.querySelector('iframe'); let iframe = document.querySelector('iframe');
navbarItems.forEach(item => { navbarItems.forEach(item => {
item.addEventListener('click', () => { item.addEventListener('click', () => {
// 已选中项再次点击，不执行操作
if(item.classList.contains('active')) return;
navbarItems.forEach(item => { navbarItems.forEach(item => {
item.classList.remove('active'); item.classList.remove('active');
}); });
item.classList.add('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> </script>
</body> </body>