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代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
使用JS location实现搜索框历史记录功能
首先,来看下效果图(样式什么的就不必吐槽了哈) html代码 <form id="hisform"> <div id="searchbox"> <input id="inpt" type="text" autocomplete="off" /> <input id="btn" type="button" value="
-
jquery使用Cookie和JSON记录用户最近浏览历史
在一些电商网站,有"商品浏览历史记录"这一功能,一些视频类.小说类的网站也能记录用户最近的浏览历史.本文将使用Cookie以及JSON来讲解如何实现这一功能. Cookie可以用来记录客户端用户ID.密码.浏览过的网页.停留的时间等信息,jQuery提供了一个cookie插件,能非常方便的读写cookie信息. 基本流程: 1.获取文章详情页面文章的标题和页面地址: 2.获取浏览历史cookie信息,判断如果浏览历史的cookie中已经存在当前文章的浏览记录,则不进行任何操作: 3.如
-
JavaScript中的History历史对象
JavaScript中的History历史对象包含了用户已浏览的 URL 的信息,是指历史对象指浏览器的浏览历史.鉴于安全性的需要,该对象收到很多限制,现在只剩下下列属性和方法.History历史对象有length这个属性,列出历史的项数.JavaScript 所能管到的历史被限制在用浏览器的"前进""后退"键可以去到的范围.本属性返回的是"前进"和"后退"两个按键之下包含的地址数的和. History历史对象并有以下方法 b
-
javascript 历史记录 经常用于产品最近历史浏览第1/2页
本文将用js+cookie来实现这一功能,因为最近都在研究jquery,所以也就顺便用上了,如果你不想用jquery,那么你更需要了解实现的过程就可以了,代码自己去写. 需要用到一个jquery的cookie插件,用来操作cookie,连接http://www.jb51.net/article/18276.htm需要稍微了解json,资料使用json然为了简单,这里假设浏览记录只记录3个. 基本流程如下: 1.如果cookie中记录的历史产品数目为0或1或2,那么直接在cookie中插入. 2.
-
javascript结合Cookies实现浏览记录历史第1/3页
由于以前对javascript了解不够深入,一时间手足无措. 后来经过两位高手同事的指点(对这两位同事的敬仰犹如滔滔江水连绵不绝...),恍然大悟,豁然开朗 成功地完成了此功能的添加. 首先来介绍一下javascript中关于此功能的一些对象和方法: 1. window.event对象: event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. 2. event.srcElement: 表示该事件的发生源 通俗一点说也就
-
JavaScript入门教程(7) History历史对象
鉴于安全性的需要,该对象收到很多限制,现在只剩下下列属性和方法.History历史对象有length这个属性,列出历史的项数.JavaScript 所能管到的历史被限制在用浏览器的"前进""后退"键可以去到的范围.本属性返回的是"前进"和"后退"两个按键之下包含的地址数的和. History历史对象并有以下方法 back() 后退,跟按下"后退"键是等效的. forward() 前进,跟按下"前进
-
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
window.history对象在编写时可不使用 window 这个前缀.为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制. 方法: history.back() - 加载历史列表中的前一个URL,这与在浏览器中点击前进按钮是相同的history.forward() - 加载历史列表中的下一个URL,这与在浏览器中点击前进按钮是相同的 实例: 复制代码 代码如下: <html><button name="back" value="后退&
-
js 实现浏览历史记录示例
先必须要引用一个js jquery.cookie.js 1,首先写入jsCookied 复制代码 代码如下: //浏览记录 写入JSCookied 开始 var img=$("#ProductImgurl").attr("jqimg"); var name=$("#ProductDetail_ctl00_LabelName").text(); var url=location.href; var price=$("#ProductDet
-
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
本文就是要利用cookie插件,获取用户浏览文章历史记录,并将用户最近浏览历史记录显示在页面. 在需要添加cookie的页面加上如下js <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script
-
JS返回页面时自动回滚到历史浏览位置
在我的系统实际开发过程中遇到一个需求,我需要让应用在各个页面间跳转时回到每页原先浏览到的位置,方便用户使用. 在网上查资料时,看到的方案有不少,众说纷纭,但真正给出可行可用代码的寥寥无几,所以我干脆按自己的想法用SessionStorage写了一个缓存页面的方法,在离开页面时将需要缓存的容器中所有内容都存到SessionStorage中,在返回页面时重新加载,方便用户操作,效果如下: 页面缓存 使用方法 用法也很简单,咱一步一步讲. 首先,在你需要缓存标签容器的类名中加入cache,并写一个na