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
Download Patch File Download Diff File Expand all files Collapse all files

62
index.html
View File

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