IT学习站-137zw.com

作者: 刘冠华
查看: 134|回复: 0

more +资源更新Forums

more +随机图赏Gallery

价值368元 从Docker到K8S实战视频教程 五年工程师主讲 百度云价值368元 从Docker到K8S实战视频教程 五年工程师主讲 百度云
价值299 opencv+tensorflow入门人工智能图像处理 百度云 网盘 下载价值299 opencv+tensorflow入门人工智能图像处理 百度云 网盘 下载
价值199元 Nginx中间件搭建负载均衡安全防护动静分离视频 ...价值199元 Nginx中间件搭建负载均衡安全防护动静分离视频 ...
价值348元 RabbitMQ消息中间件技术精讲2018视频教程 百度云价值348元 RabbitMQ消息中间件技术精讲2018视频教程 百度云
云豹直播平台全套源码无限制完美运营版(安卓+IOS)源码云豹直播平台全套源码无限制完美运营版(安卓+IOS)源码
Spring Security4企业权限管理视频,完整版课程下载Spring Security4企业权限管理视频,完整版课程下载

林大妈的JavaScript进阶知识(四):HTML5 History API

林大妈的JavaScript进阶知识(四):HTML5 History API

[复制链接]
刘冠华 | 显示全部楼层 发表于: 2019-11-14 12:55:00
刘冠华 发表于: 2019-11-14 12:55:00 | 显示全部楼层 |阅读模式
查看: 134|回复: 0

你还没有注册,无法下载本站所有资源,请立即注册!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
HTML5中新增了History API,它用于管理浏览器路由跳转的一个url栈。History是window对象的一部分,它也是一个对象,因此称它是BOM(类似DOM,Browser Object Model)中的一份子。History对象包含了用户在浏览器端访问过的所有url。
一、为什么存在History对象
  当使用location.herf或a标签中的非锚点方式的href进行页面跳转时,会造成整个页面的刷新。但目前来说,越来越多的单页应用利用ajax技术进行异步请求,仅仅依靠数据变化更改视图而不刷新页面,像浏览器的前进和后退这些按钮的功能定位就会变得十分尴尬。例如我们访问一个博客页,在列表中点击某个博客跳转到文章页面,但文章是利用ajax技术加载的,也就是页面的url没有发生变化。此时我觉得这篇博客很有教育意义,于是将它分享给了我的朋友,如果不对路由进行处理,我的朋友点击这个url打开的页面将是博客列表而不是这篇被分享的博客。因此我们需要得到History对象的帮助。同时,History对象本被设计以表示与操作浏览器的访问历史,但由于隐私原因,它被封装好不能使用脚本访问其中的url,而只允许我们使用暴露出的几个方法:go()、back()和forward()来进行跳转。

二、History相关方法
  我们已经介绍了History中存在的部分内容以及它为什么要诞生。然后我们就要关注怎么使用它。我们首先要了解它的内建方法:
  1. back(),forward()和go(n)方法
    这三个方法的使用非常的直观,如它们字面的意思一样,就是直接调用history.back()和history.forward(),还有history.go(n)。其中go方法中填入参数为希望跳转到多少个页面以前/以后,填入正数n相当于循环调用n次forward,负数-n相当于循环调用n次back。假如我先后访问了
    ① www.baidu.com,
    ② www.google.com,
    ③ www.cnblogs.com(现在页面在此处):
    当我在浏览器调试工具中这样调用:  2. pushState(stateData, title, url),replaceState(stateData, title, url)
    这两个方法也是单页面应用实现的实质之一,它们均不会造成页面的刷新,且都不能跨域。而它们的功能可以从名字中看出,分别是在history栈中创建新的访问记录和修改当前的访问记录。需要注意的是,pushState会将当前url往后的记录清除,再将新的url记录压入history栈中。
  3. location.href
    这个location对象中的属性会直接导致刷新页面,需要与以上的两个方法进行区分。
  4. window.onpopstate,window.onhashchange
    这两个全局方法被创建用以监听访问的变化。它们的区别是,一个只有在页面发生刷新的情况下调用;一个在url的锚点(由于“#”后面的内容不会被识别,修改它页面不会发生跳转,因此称为锚点)变化时就会调用。

三、以图详解变化
林大妈的JavaScript进阶知识(四):HTML5 History API  技术博客 1751499-20190909162745312-620269449

上图简单介绍了History API中各方法调用时url跳转及页面显示情况。其中橙色表示当前页面显示的内容。


总结:由于Ajax技术的出现,单页面应用的兴起,现代的Web技术中需要有正确管理调度路由的工具,History API于是诞生。现代的前端框架中也同样配备了以History封装的路由管理工具,如,Vue-router,React-router-DOM等。通过了解History中go、pushState以及replaceState方法,我们可以进一步学习框架内部的实现原理。只有懂得原理才能触类旁通。


来源:http://www.137zw.com
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
137zw.com IT学习站致力于免费提供精品的java技术教程和python技术教程,CCNA书籍/资料/CCNP书籍/资料教程/CCIE书籍/资料/H3C学习/认证/一级建造师考试/微软学习/认证/包括基础教程和高级实战教程,同时也提供分享网站源码下载和互联网相关一系列的技术教程,我们想做的就是让知识分享更有价值!(IT学习站官方唯一域名地址:www.137zw.com 请谨防假冒网站!)本站所有资源全部收集于互联网或网友自行分享,分享目的仅供大家学习与参考,如无意中侵犯您的合法权益,请联系本站管理员进行删除处理!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

浙ICP备19022368号-1|Archiver|手机版|IT学习站-137zw.com

GMT+8, 2020-7-5 23:36 , Processed in 0.249806 second(s), 32 queries .

快速回复 返回顶部 返回列表