主页 / 网络编程 /

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

网络编程 2021-07-04 15:02www.168986.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程序设计有所帮助。

上一篇：javascript 内存模型实例详解 下一篇：javascript使用Blob对象实现的下载文件操作示例

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by