javascript-hashchange事件和历史状态管理实例分析
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了javascript-hashchange事件和历史状态管理,结合实例形式分析了javascript-hashchange基本功能、原理及历史状态管理相关操作技巧,需要的朋友可以参考下
本文实例讲述了javascript-hashchange事件和历史状态管理。分享给大家供大家参考，具体如下：
hashchange事件
hashchange事件，可以监听URL参数（#后面的字符串）什么时候发生变化。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="EventUtil.js"></script>
<script>
EventUtil.addHandler(window, 'load', function () {
var form = document.forms[0]
var elements = form.elements
var mybutton = elements['createBtn']
var div = document.getElementById('uuid')
var data = {}
EventUtil.addHandler(mybutton, 'click', function (event) {
event = EventUtil.getEvent(event)
var target = EventUtil.getTarget(event)
var uuid = getUuid()
var time = Date.now()
// 删除所有子节点
while (div.hasChildNodes()) {
div.removeChild(div.firstChild);
}
data[time] = uuid
div.appendChild(document.createTextNode(uuid))
window.location.hash = time
})
// 监听url的参数列表（url中#后面的所有字符串）
EventUtil.addHandler(window, 'hashchange', function (event) {
event = EventUtil.getEvent(event)
// 删除所有子节点
while (div.hasChildNodes()) {
div.removeChild(div.firstChild);
}
var text = data[window.location.hash.substring(1)]
div.appendChild(document.createTextNode(text))
console.log(`旧url：${event.oldURL}\n新url：${event.newURL}\n当前hash：${location.hash}`)
})
// 获取uuid
function getUuid () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0
var v = c === 'x' ? r : (r & 0x3 | 0x8)
return v.toString(16)
}).replace(/-/g, '')
}
</script>
</head>
<body>
<form action="" method="get">
<label for="mybutton">UUID：</label>
<input id="mybutton" type="button" value="生成" autofocus name="createBtn">
</form>
<div id="uuid"></div>
</body>
</html>
历史状态管理
状态管理API，能够在不加载新页面的情况下改变浏览器的URL。使用history.pushState()方法。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="EventUtil.js"></script>
<script>
EventUtil.addHandler(window, 'load', function () {
var form = document.forms[0]
var elements = form.elements
var mybutton = elements['createBtn']
var div = document.getElementById('uuid')
var data = {}
EventUtil.addHandler(mybutton, 'click', function (event) {
event = EventUtil.getEvent(event)
var target = EventUtil.getTarget(event)
var uuid = getUuid()
var time = Date.now()
// 删除所有子节点
while (div.hasChildNodes()) {
div.removeChild(div.firstChild);
}
data[time] = uuid
div.appendChild(document.createTextNode(uuid))
// 创建新的历史状态
history.pushState({name: time}, '', 'index.html')
})
// 监听浏览器“后退”（返回上一页）事件
EventUtil.addHandler(window, 'popstate', function (event) {
event = EventUtil.getEvent(event)
var state = event.state
if (state) {
console.log(state)
}
})
})
// 获取uuid
function getUuid () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0
var v = c === 'x' ? r : (r & 0x3 | 0x8)
return v.toString(16)
}).replace(/-/g, '')
}
</script>
</head>
<body>
<form action="" method="get">
<label for="mybutton">UUID：</label>
<input id="mybutton" type="button" value="生成" autofocus name="createBtn">
</form>
<div id="uuid"></div>
</body>
</html>
注意
状态管理API只能在服务端调用！
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。