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

更新时间：2020年04月18日 13:04:25 作者：harmsworth2016

这篇文章主要介绍了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程序设计有所帮助。

您可能感兴趣的文章:

微信小程序自定义Dialog弹框
这篇文章主要为大家详细介绍了微信小程序自定义Dialog弹框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
微信小程序实现锚点跳转
这篇文章主要为大家详细介绍了微信小程序实现锚点跳转，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
微信小程序开发之map地图实现教程
相信大家现在都知道微信小程序吧，下面这篇文章主要给大家介绍了微信小程序开发之map地图的相关资料，分享出来供大家参考学习，文中通过示例代码介绍的非常详细，需要的朋友们下面跟着小编来一起学习学习吧。
2017-06-06
Javascript中的every()与some()的区别和应用小结
every跟some不同点在于，every要判断数组中是否每个元素都满足条件，只有都满足条件才返回true，只要有一个不满足就返回false，这篇文章主要介绍了Javascript中的every()与some()的区别和应用,需要的朋友可以参考下
2023-05-05
JS实现让网页背景图片斜向移动的方法
这篇文章主要介绍了JS实现让网页背景图片斜向移动的方法,涉及javascript操作背景图片特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
JavaScript forEach 方法跳出循环的操作方法
这篇文章主要介绍了JavaScript forEach 方法跳出循环的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-01-01
Javascript中的匿名函数与封装介绍
这篇文章主要介绍了Javascript中的匿名函数与封装介绍,本文分析了jQuery 封装、Backbone 封装、Underscore 封装等内容,需要的朋友可以参考下
2015-03-03
javascript 一些用法小结
JavaScript的一些用法总结
2009-09-09
解决iframe的frameborder在chrome/ff/ie下的差异
最近的项目中使用了动态创建iframe的js方法，发现iframe.frameborder="0"在IE7下不管用，而chrome/ff都正常的，很是郁闷。
2010-08-08
详谈JS中实现种子随机数及作用
这篇文章详细介绍了种子随机数在JS中如何实现以及有什么作用，希望能帮助有需要的人。下面一起来看看。
2016-07-07