抽离html公共样式；套壳页面添加不刷新页面切换页面，以及url target参数等
This commit is contained in:
parent
e7692bac65
commit
c062151ea3
24
html/assets/css/main.css
Normal file
24
html/assets/css/main.css
Normal 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;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
62
index.html
62
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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user