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 相关文章推荐
一些javascript一些题目的解析
Dec 25 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
将list转换为json失败的原因
Dec 17 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 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+mysql实现无限分类实例详解
2015/01/15 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
php实现文章评论系统
2019/02/18 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
Python全局变量操作详解
2015/04/14 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Django配置跨域并开发测试接口
2020/11/04 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
期末自我鉴定
2014/01/23 职场文书
教学评估实施方案
2014/03/16 职场文书
项目合作意向书模板
2014/07/29 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
美容院合作经营协议书
2014/10/10 职场文书
2014年工程工作总结
2014/11/25 职场文书
开学典礼观后感
2015/06/15 职场文书
个人向公司借款协议书
2016/03/19 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
创业计划书之宠物店
2019/09/19 职场文书