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 获取链接(url)参数的方法
Feb 15 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
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
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
js代码实现微博导航栏
2015/07/30 PHP
js常见表单应用技巧
2008/01/09 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
Angularjs 基础入门
2014/12/26 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
js动态引入的四种方法
2018/05/05 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
python 实时遍历日志文件
2016/04/12 Python
python实现点对点聊天程序
2018/07/28 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Python调用Windows命令打印文件
2020/02/07 Python
零基础学python应该从哪里入手
2020/08/11 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
导购员的岗位职责
2014/02/08 职场文书
党员民主评议自我评价
2014/10/20 职场文书
加强作风建设工作总结
2014/10/23 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
索赔员岗位职责
2015/02/15 职场文书
千与千寻观后感
2015/06/04 职场文书
环保建议书作文400字
2015/09/14 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python