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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
js获取 type=radio 值的方法
May 09 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 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
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
php引用传值实例详解学习
2013/11/06 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
Python datetime模块使用方法小结
2020/06/18 Python
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
毕业求职自荐信格式是什么
2013/11/19 职场文书
高级工程师英文求职信
2014/03/19 职场文书
电子专业自荐信
2014/07/01 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
本溪关门山导游词
2015/02/09 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
python接口测试返回数据为字典取值方式
2022/02/12 Python
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技