javascript-hashchange事件和历史状态管理实例分析


Posted in Javascript onApril 18, 2020

本文实例讲述了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>

javascript-hashchange事件和历史状态管理实例分析

历史状态管理

状态管理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只能在服务端调用!

javascript-hashchange事件和历史状态管理实例分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
jquery 笔记 事件
Nov 02 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
JS实现小米轮播图
Sep 21 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
javascript使用Blob对象实现的下载文件操作示例
Apr 18 #Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 #Javascript
es6函数name属性功能与用法实例分析
Apr 18 #Javascript
es6数组includes()用法实例分析
Apr 18 #Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 #Javascript
es6函数中的作用域实例分析
Apr 18 #Javascript
es6函数之rest参数用法实例分析
Apr 18 #Javascript
You might like
Ajax PHP分页演示
2007/01/02 PHP
discuz Passport 通行证 整合笔记
2008/06/30 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
PHP count()函数讲解
2019/02/03 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
node中IO以及定时器优先级详解
2019/05/10 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
Python中return语句用法实例分析
2015/08/04 Python
Python进程间通信之共享内存详解
2017/10/30 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
电信营业员自我评价分享
2014/01/17 职场文书
农民工讨薪标语
2014/06/26 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
大学生就业意向书
2015/05/11 职场文书
焦裕禄观后感
2015/06/03 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书