你真的了解BOM中的history对象吗


Posted in Javascript onFebruary 13, 2017

前面的话

history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后退和前进。本文将详细介绍BOM中的history对象

length

history.length属性保存着历史记录的URL数量。初始时,该值为1。如果当前窗口先后访问了三个网址,history.length属性等于3

由于IE10+浏览器在初始时返回2,存在兼容性问题,所以该值并不常用

history.length // 初始时,该值为1
history.length // 访问三个网址后,该值为3

跳转方法

history对象提供了一系列方法,允许在浏览历史之间移动,包括go()、back()和forward()

go()

使用go()方法可以在用户的历史记录中任意跳转。这个方法接收一个参数,表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(类似于后退按钮),正数表示向前跳转(类似于前进按钮)

//后退一页
history.go(-1)
//前进一页
history.go(1);
//前进两页
history.go(2);

go()方法无参数时,相当于history.go(0),可以刷新当前页面

//刷新当前页面
history.go();
//刷新当前页面
history.go(0);

back()

back()方法用于模仿浏览器的后退按钮,相当于history.go(-1)

forward()

forward()方法用于模仿浏览器的前进按钮,相当于history.go(1)

//后退一页
history.back()
//前进一页
history.forward()

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

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

增改记录

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上有区别

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

// 报错
history.pushState(null, null, 'https://twitter.com/hello');

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所提供的状态对象(即这两个方法的第一个参数)

window.onpopstate = function (event) {
 console.log('location: ' + document.location);
 console.log('state: ' + JSON.stringify(event.state));
};

上面代码中的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

(function(){
  var showCount = 0;
  window.onload = function(){
    console.log('loaded');
  }
  window.onpageshow = function(e){
    e = e || event;
    showCount ++;
    console.log(e.persisted,showCount + 'times');
  }

[注意]上面的例子使用了私有作用域,以防止变量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);
}

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

Javascript 相关文章推荐
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
微信小程序-获得用户输入内容
Feb 13 #Javascript
js实现textarea限制输入字数
Feb 13 #Javascript
Canvas实现动态的雪花效果
Feb 13 #Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 #Javascript
Bootstrap选项卡学习笔记分享
Feb 13 #Javascript
jQuery Ajax全解析
Feb 13 #Javascript
jQuery中 bind的用法简单介绍
Feb 13 #Javascript
You might like
SMARTY学习手记
2007/01/04 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
js Html结构转字符串形式显示代码
2011/11/15 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
Python脚本暴力破解栅栏密码
2015/10/19 Python
python读取xlsx的方法
2018/12/25 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
Django使用rest_framework写出API
2020/05/21 Python
python 通过文件夹导入包的操作
2020/06/01 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
学历公证书范本
2014/04/09 职场文书
网络舆情信息简报
2015/07/21 职场文书
《检阅》教学反思
2016/02/22 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers