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

时间：2021-04-10 08:53:04|栏目：JavaScript代码|点击：次

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