javascript-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只能在服务端调用！

文章来源: javascript-hashchange事件和历史状态管理

标签

uuid

var