pushstate

最新推荐文章于 2021-09-16 09:46:14 发布

anqila1855

最新推荐文章于 2021-09-16 09:46:14 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/wyq-web/p/9496241.html

版权

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>History Api</title>
<style>
html,
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}

aside {
background-color: #ccc;
width: 220px;
float: left;
height: 100%;
}

aside ul {
font-size: 20px;
line-height: 2;
}

aside ul li {
cursor: pointer;
}

article {
background-color: #f5f5f5;
margin-left: 220px;
padding: 20px;
height: 100%;
overflow: scroll;
font-size: 20px;
}
</style>
</head>

<body>
<aside>
<ul id="list" data-id="1" data-name="sss">
</ul>
</aside>
<article>
<p id="content"></p>
</article>

<script src="data.js"></script>
<script>
(function() {
var listElement = document.querySelector('#list');
for (var title in data) {
var liElement = document.createElement('li');
liElement.innerHTML = '⭐️' + title;
liElement.setAttribute('data-title', title);
listElement.appendChild(liElement);
}

var liElements = document.querySelectorAll('#list>li');

// 当我们在伪造的访问历史中前进或后退时会执行一个popstate事件
window.addEventListener('popstate', function(e) {
content.innerHTML = data[e.state];
});

// window.location = "https://www.baidu.com";
// 第一次请求过来获取地址栏中的t参数
// window.location可以拿到当前网页中跟地址相关的信息
var search = window.location.search; // ?t=jkaljdksfla
// 如果地址栏中的地址有中文，会以URL编码方式呈现
// decodeURI 可以转换到之前中文
var title = search.split('=')[1]; // ['?t','jkaljdksfla']
if (title) {
// 有值 decodeURI作用就是从URL编码转换到之前的状态
console.log(decodeURI(title));
content.innerHTML = data[decodeURI(title)];
}
})();
</script>
</body>

</html>

转载于:https://www.cnblogs.com/wyq-web/p/9496241.html

anqila1855

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
pushstate

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>History Api</title> <style> html, body { height: 100%; overflow:...
复制链接

扫一扫

pushstate

“相关推荐”对你有帮助么？