javascript History对象原理解析


Posted in Javascript onFebruary 17, 2020

这篇文章主要介绍了javascript History对象原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

length

history.length属性保存着历史记录的URL数量。初始时,该值为1。由于IE10+浏览器在初始时返回2,存在兼容性问题,所以该值并不常用

跳转方法

go()、back()和forward()

如果移动的位置超出了访问历史的边界,以上三个方法并不报错,而是静默失败

[注意]使用历史记录时,页面通常从浏览器缓存之中加载,而不是重新要求服务器发送新的网页。不触发onload

增改记录

HTML5为history对象添加了两个新方法,history.pushState()和history.replaceState(),用来在浏览历史中添加和修改记录。state属性用来保存记录对象,而popstate事件用来监听history对象的变化

[注意]ie9不支持

 【pushState()】

history.pushState()方法向浏览器历史添加了一个状态。pushState()方法带有三个参数:一个状态对象、一个标题(现在被忽略了)以及一个可选的URL地址

history.pushState(state, title, url);

state object —— 状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。当用户定向到一个新的状态时,会触发popstate事件。事件的state属性包含了历史纪录的state对象。如果不需要这个对象,此处可以填null

title —— 新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null

URL —— 这个参数提供了新历史纪录的地址。新URL必须和当前URL在同一个域,否则,pushState()将丢出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前URL

假定当前网址是example.com/1.html,使用pushState方法在浏览记录(history对象)中添加一个新记录

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');

添加上面这个新记录后,浏览器地址栏立刻显示example.com/2.html,但并不会跳转到2.html,甚至也不会检查2.html是否存在,它只是成为浏览历史中的最新记录。假如这时访问了google.com,然后点击了倒退按钮,页面的url将显示2.html,但是内容还是原来的1.html。再点击一次倒退按钮,url将显示1.html,内容不变

总之,pushState方法不会触发页面刷新,只是导致history对象发生变化,地址栏的显示地址发生变化

如果pushState的url参数,设置了一个新的锚点值(即hash),并不会触发hashchange事件,,即使新的URL和旧的只在hash上有区别

如果设置了一个跨域网址,则会报错。这样设计的目的是,防止恶意代码让用户以为他们是在另一个网站上

【replaceState()】

history.replaceState方法的参数与pushState方法一模一样,不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目

假定当前网页是example.com/example.html

history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()
// url显示为http://example.com/example.html?page=1
history.back()
// url显示为http://example.com/example.html
history.go(2)
// url显示为http://example.com/example.html?page=3

【state】

history.state属性返回当前页面的state对象

history.pushState({page: 1}, 'title 1', '?page=1');
history.state// { page: 1 }

【popstate事件】

每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件

[注意]需要注意的是,仅仅调用pushState方法或replaceState方法,并不会触发该事件,只有用户点击浏览器倒退按钮和前进按钮,或者使用javascript调用back()、forward()、go()方法时才会触发。另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发

使用的时候,可以为popstate事件指定回调函数。这个回调函数的参数是一个event事件对象,它的state属性指向pushState和replaceState方法为当前URL所提供的状态对象(即这两个方法的第一个参数)

上面代码中的event.state,就是通过pushState和replaceState方法,为当前URL绑定的state对象

这个state对象也可以直接通过history对象读取

var currentState = history.state;

往返缓存

默认情况下,浏览器会在当前会话(session)缓存页面,当用户点击“前进”或“后退”按钮时,浏览器就会从缓存中加载页面

浏览器有一个特性叫“往返缓存”(back-forward cache或bfcache),可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据,还保存了DOM和javascript的状态;实际上是将整个页面都保存在了内存里。如果页面位于bfcache中,那么再次打开该页面时就不会触发load事件

[注意]IE10-浏览器不支持

【pageshow】

pageshow事件在页面加载时触发,包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码,可以放在这个事件的监听函数

第一次加载时,它的触发顺序排在load事件后面。从缓存加载时,load事件不会触发,因为网页在缓存中的样子通常是load事件的监听函数运行后的样子,所以不必重复执行。同理,如果是从缓存中加载页面,网页内初始化的JavaScript脚本(比如DOMContentLoaded事件的监听函数)也不会执行

[注意]虽然这个事件的目标是document,但必须将其事件处理程序添加到window

pageshow事件有一个persisted属性,返回一个布尔值。页面第一次加载时或没有从缓存加载时,这个属性是false;当页面从缓存加载时,这个属性是true

[注意]上面的例子使用了私有作用域,以防止变量showCount进入全局作用域。如果单击了浏览器的“刷新”按钮,那么showCount的值就会被重置为0,因为页面已经完全重新加载了

【pagehide】

与pageshow事件对应的是pagehide事件,该事件会在浏览器卸载页面的时候触发,而且是在unload事件之前触发。与pageshow事件一样,pagehide在document上面触发,但其事件处理程序必须要添加到window对象

[注意]指定了onunload事件处理程序的页面会被自动排除在bfcache之外,即使事件处理程序是空的。原因在于,onunload最常用于撤销在onload中所执行的操作,而跳过onload后再次显示页面很可能就会导致页面不正常

pagehide事件的event对象也包含persisted属性,不过其用途稍有不同。如果页面是从bfcache中加载的,那么persisted的值就是true;如果页面在卸载之后会被保存在bfcache中,那么persisted的值也会被设置为true。因此,当第一次触发pageshow时,persisted的值一定是false,而在第一次触发pagehide时,persisted就会变成true(除非页面不会被保存在bfcache中)

window.onpagehide = function(e){
e = e || event;
console.log(e.persisted);
}

使用方法:

1、取消默认的返回操作

function pushHistory(){
 var state = {
    title: "title",
    url: "#"   
  }
 window.history.pushState(state, "title", "#");  
}

pushHistory()

2、history.js用于兼容html4,也可以监听pushState与replaceSate

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
js构造函数创建对象是否加new问题
Jan 22 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
Vue中fragment.js使用方法小结
Feb 17 #Javascript
javascript实现倒计时效果
Feb 17 #Javascript
JavaScript将数组转换为链表的方法
Feb 16 #Javascript
javascript canvas API内容整理
Feb 16 #Javascript
vue props 单项数据流实例分享
Feb 16 #Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 #Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 #Javascript
You might like
有关PHP性能优化的介绍
2013/06/20 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
pandas object格式转float64格式的方法
2018/04/10 Python
python批量获取html内body内容的实例
2019/01/02 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
django实现后台显示媒体文件
2020/04/07 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
Python自动化操作实现图例绘制
2020/07/09 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
致1500米运动员广播稿
2014/02/07 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
中学生逃课检讨书
2015/02/17 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
浅析Python中的随机采样和概率分布
2021/12/06 Python