林大妈的JavaScript进阶知识(三):HTML5 History API
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(现在页面在此处):
当我在浏览器调试工具中这样调用:
history.back();
//跳转到谷歌首页
history.forward();
//跳转到博客园首页
history.go(-2);
//跳转到百度首页
history.go(2);
//跳转到博客园首页
2. pushState(stateData, title, url),replaceState(stateData, title, url)
这两个方法也是单页面应用实现的实质之一,它们均不会造成页面的刷新,且都不能跨域。而它们的功能可以从名字中看出,分别是在history栈中创建新的访问记录和修改当前的访问记录。需要注意的是,pushState会将当前url往后的记录清除,再将新的url记录压入history栈中。
3. location.href
这个location对象中的属性会直接导致刷新页面,需要与以上的两个方法进行区分。
4. window.onpopstate,window.onhashchange
这两个全局方法被创建用以监听访问的变化。它们的区别是,一个只有在页面发生刷新的情况下调用;一个在url的锚点(由于“#”后面的内容不会被识别,修改它页面不会发生跳转,因此称为锚点)变化时就会调用。
三、以图详解变化
上图简单介绍了History API中各方法调用时url跳转及页面显示情况。其中橙色表示当前页面显示的内容。
总结:由于Ajax技术的出现,单页面应用的兴起,现代的Web技术中需要有正确管理调度路由的工具,History API于是诞生。现代的前端框架中也同样配备了以History封装的路由管理工具,如,Vue-router,React-router-DOM等。通过了解History中go、pushState以及replaceState方法,我们可以进一步学习框架内部的实现原理。只有懂得原理才能触类旁通。
林大妈的JavaScript进阶知识(三):HTML5 History API的更多相关文章
- 林大妈的JavaScript进阶知识(二):JS异步行为
JavaScript 是单线程执行的 JavaScript运行在浏览器中.浏览器是多线程的,但只分配了其中一条给JavaScript,作为它的主线程.对于编码者来说,JavaScript是单线程的.因 ...
- 林大妈的JavaScript进阶知识(一):对象与内存
JavaScript中的基本数据类型 在JS中,有6种基本数据类型: string number boolean null undefined Symbol(ES6) 除去这六种基本数据类型以外,其他 ...
- 林大妈的JavaScript基础知识(三):JavaScript编程(2)函数
JavaScript是一门函数式的面向对象编程语言.了解函数将会是了解对象创建和操作.原型及原型方法.模块化编程等的重要基础.函数包含一组语句,它的主要功能是代码复用.隐藏信息和组合调用.我们编程就是 ...
- 林大妈的JavaScript基础知识(三):JavaScript编程(3)原型
在一般的编程语言中,我们使用继承来复用代码,做成良好的数据结构.而在JavaScript中,我们使用原型来实现以上的需求.由于JavaScript专注于对象而摒弃了类,我们要明白原型和继承的确是有差异 ...
- 林大妈的JavaScript基础知识(三):JavaScript编程(4)数组
数组,是一段线性分配的,具有非常高性能的数据结构.简单地说,数组以连续的空间存储,通过整数地计算偏移量访问其中的元素,将读取修改的时间复杂度降低至O(1),我们称之为猝发式存取.是不是非常期待?没错, ...
- 林大妈的JavaScript基础知识(三):JavaScript编程(1)对象
1. 对象的简单介绍与一些注意事项 JavaScript中具有几个简单数据类型:数字.字符串.布尔值.null值以及undefined值.除此之外其余所有值(包括数组.函数,甚至正则表达式)都是对象. ...
- 林大妈的JavaScript基础知识(一):JavaScript简史
前言:做一名Web设计师是一件令人兴奋的事.在Web技术中,JavaScript是一个经历从被人误解到万众瞩目的巨大转变,在历史的冲击中被留存下来的个体.因为JavaScript的引导,Web开发也从 ...
- 林大妈的JavaScript基础知识(二):编写JavaScript代码前的一些简单工作
在介绍JavaScript语法前,我们需要知道,学习语法必须要多利用手敲代码来巩固记忆.因此,由于JavaScript的特性,它不能像C++和Java一样独立地编译及运行,我们需要在调试运行JavaS ...
- HTML5 History API让ajax能回退到上一页
HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...
随机推荐
- 夯实Java基础(三)——面向对象之继承
1.继承概述 继承是Java面向对象的三大特征之一,是比较重要的一部分,与后面的多态有着直接的关系.继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法, ...
- java订单生成工具类
欢迎来到付宗乐个人博客网站.本个人博客网站提供最新的站长新闻,各种互联网资讯. 还提供个人博客模板,最新最全的java教程,java面试题.在此我将尽我最大所能将此个人博客网站做的最好! 谢谢大家,愿 ...
- S3 Select for Java 使用记录
背景 后台基本使用 Amazon 的全家桶(EC2.DynamoDB.S3.Step Fuction 等等)构建.现在需要根据访问者的 IP 确定访问者的国家或地区. 已知: 访问者 IP 一个 ip ...
- MVP架构下解决 RxJava 自动解绑问题
背景 MVP 模式下使用 RxJava 处理网络访问的回调,当数据返回时 Presenter 调用绑定的 View 的方法. 定义 BasePresenter 如下: public class Bas ...
- tensorflow学习笔记——图像识别与卷积神经网络
无论是之前学习的MNIST数据集还是Cifar数据集,相比真实环境下的图像识别问题,有两个最大的问题,一是现实生活中的图片分辨率要远高于32*32,而且图像的分辨率也不会是固定的.二是现实生活中的物体 ...
- AutoCAD二次开发(.Net)之创建图层Layer
//https://blog.csdn.net/qq_21489689?t=1[CommandMethod("CREATELY")] public void CreateLayer ...
- 深入理解JVM虚拟机开篇:JVM介绍与知识脉络梳理
微信公众号[Java技术江湖]一位阿里 Java 工程师的技术小站.作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux.网络.多线程,偶尔 ...
- PHP危险函数总结学习
1.PHP中代码执行的危险函数 call_user_func() 第一个参数 callback 是被调用的回调函数,其余参数是回调函数的参数. 传入call_user_func()的参数不能为引用传递 ...
- LCA最近公共祖先---倍增法笔记
先暂时把模板写出来,A几道题再来补充 此模板也是洛谷上的一道模板题 P3379 [模板]最近公共祖先(LCA) #pragma GCC optimize(2) //o2优化 #include < ...
- net core Webapi基础工程搭建(三)——在线接口文档Swagger
目录 前言 Swagger NuGet引用第三方类库 别急,还有 没错,注释 小结 前言 前后分离的好处,就是后端埋头做业务逻辑功能,不需要过多考虑用户体验,只专注于数据.性能开发,对于前端需要的数据 ...