javascript history对象详解


Posted in Javascript onFebruary 09, 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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
jquery dialog获取焦点的方法
Feb 09 #Javascript
jQuery实现淡入淡出的模态框
Feb 09 #Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 #Javascript
JS在浏览器中解析Base64编码图像
Feb 09 #Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 #Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 #Javascript
JS回调函数简单用法示例
Feb 09 #Javascript
You might like
php获取地址栏信息的代码
2008/10/08 PHP
PHP中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
js读取cookie方法总结
2014/10/31 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
详解react-redux插件入门
2018/04/19 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
Unicode和Python的中文处理
2017/03/19 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
django将数组传递给前台模板的方法
2019/08/06 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
社区工作感言
2014/02/21 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
我的中国梦主题班会
2015/08/14 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
python基于tkinter实现gif录屏功能
2021/05/19 Python
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS