Session History 属性和方法
History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。
js通过window.history来访问和操作的,操作的范围是某个tab的会话历史记录。
这个tab打开后,tab内的跳转或者你手动输入的地址,都在控制范围内。
属性
1. History.length
返回一个整数,该整数表示会话历史中元素的数目,包括当前加载的页。例如,在一个新的选项卡加载的一个页面中,这个属性返回1。
在这里我们想想 history.go(-histoy.length) 会发生什么呢,history.go(-history.length+1) 又会发生什么。
history.go(-histoy.length) 什么都不会发生,因为你最多只能返回 history.length - 1
history.go(-history.length+1) 当然是返回到最初打开的页面
2. History.scrollRestoration
置默认滚动恢复行为,属性可以是自动的(auto)或者手动的(manual),默认值是auto。
就是你看某个网站滚动以后,点击链接进入新页面后,再点击返回的时候,会自动回复到原来的滚动位置。 不然的话我们可能需要记住某个值,然后window.scrollTo或者Element.scrollIntoView。
看到这个就眼前一亮了,滚动恢复,这么好的属性,相见恨晚。
兼容性, PC除了IE和Edge都还好,移动端依旧是IE和Edge,外加 Andriod内置浏览器。
3. History.state
状态值,这个值一般是在histpory.pushState(state,title,url)的第一个参数设置。之后,当地址栏匹配url时,你就可获得对应的state,这个在做前端路由的时候,路由间传参是不是赶脚很有用。
方法
1. go
go(number)
通过当前页面的相对位置从浏览器历史记录。
-1的时候为上一页,参数为1的时候为下一页.
当整数参数超出界限时,例如: 如果当前页为第一页,前面已经没有页面了,我传参的值为-1,那么这个方法没有任何效果也不会报错。
当没有参数的时候或者不是整数的参数时, chrome和firefox下面是相当于刷新, 不会增加访问历史,基本相当于window.location.reload()。
2. History.back
前往上一页, == 点击浏览器左上角的返回按钮
3. History.forward
前往下一页,, == 点击浏览器左上角的前进按钮
4. History.pushState
pushState(state, title ,url)
- state state 对象可以是任何可以序列化的东西。触发popstate事件时,事件的state属性包含了历史纪录的state对象,当然通过history.state也可以获得当前访问历史记录的state。
- title 现在大多数浏览器不支持或者忽略这个参数,最好用null代替
- url 新地址,新URL必须和当前URL在同一个源下。浏览器在调用pushState()方法后不会去加载这个URL,但有可能在之后会这样做,比如用户重启浏览器之后,这个就有点意思了。有人可能会问,这个怎么测试呢,启动chrome,打开任意网站,输入 history.pushState(null,null,'/xx/xx/xx'),然后打开新tab,输入 chrome://restart/, 这个在做单页面程序的时候,解决这种问题,需要结合服务端支持来解决这种问题。之后的文章会说道这个。
4. History.replaceState
replaceState(state, title ,url)
参数和pushState是一样的,不过这方法不会增加新的历史记录,而是替换当前的历史记录。
window的popstate事件
配合window.history使用的还有一个window的popstate事件。
每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发。
调用history.pushState()或者history.replaceState()不会触发popstate事件,popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).
当网页加载时,各浏览器对popstate事件是否触发有不同的表现, 自己测试的话chrome和firfox的较新版本都不会触发。
window.onpopstate = function(event) {
setupPage(event.state);
console.log('onpopstate')
}
event.state参数就是我们pushState,replaceState传入的参数。
最后来看一个简单的demo.
History | Can I Use
Session history and navigation
Manipulating the browser history
History.js polyfill
History | MDN
popstate
jquery-pjax
Session History 属性和方法的更多相关文章
- JS window对象 History 对象 history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。语法: window.history.[属性|方法]
History 对象 history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能. 注意:从窗口被打开的那一刻开始记录,每个浏览器窗口.每个标签页乃至每个框架,都 ...
- 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节 查看作业目录 需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具 实现思路: 使用history对象中的 forward() 方法和 ...
- Session的属性
Session的属性 Session在网络应用中被称为会话.具体到web中的Session指的就是用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间,因 ...
- js浏览器对象的属性和方法
1.window对象 /*1.计算浏览器窗口大小*/ //不算滚动条: var width = window.innerWidth; var height = window.innerHeight; ...
- Action的搭建及application、request、Session的运用 多种方法
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Javascript对象属性与方法汇总
Javascript对象属性与方法汇总 发布时间:2015-03-06 编辑:www.jquerycn.cn 详细介绍下,javascript对象属性与对象方法的相关知识,包括javascript字符 ...
- Hibernate中Session的几个方法的简单说明
Hibernate对普通JDBC的操作进行了轻量级的封装,使得开发人员可以利用Session对象以面向对象的思想来实现对关系数据库的操作. 一般通过Configuration对象读取相应的配置文件来创 ...
- session设置过期的方法(转载)
这篇文章主要介绍了php中实现精确设置session过期时间的方法,需要的朋友可以参考下 大多数据情况下我们对于session过期时间使用的是默认设置的时间,而对于一些有特殊要求的情况下我们可以设 ...
- 【repost】js window对象属性和方法相关资料整理
window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval mov ...
随机推荐
- cocos代码研究(13)Widget子类EditBox学习笔记
理论基础 一个用来输入文本的类,继承自 Widget , 以及 IMEDelegate. 代码部分 Public枚举类型 enum KeyboardReturnType键盘的返回键类型. enum I ...
- CSS控制列表样式属性list-style有哪些?怎么用?
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
- 1linux的基本命令
查看命令的帮助信息man 命令名 文件操作touch 建立文件 (对于已存在文件,更新时间)cat 查看文件 (-n 自动加上行号)rm 删除文件cp 拷贝文件mv 移动/重命名文件more 分页查看 ...
- ng-深度学习-课程笔记-8: 超参数调试,Batch正则(Week3)
1 调试处理( tuning process ) 如下图所示,ng认为学习速率α是需要调试的最重要的超参数. 其次重要的是momentum算法的β参数(一般设为0.9),隐藏单元数和mini-batc ...
- Android性能优化典范 - 第1季
https://www.zhihu.com/question/30138734 http://hukai.me/android-performance-patterns/ 2015新年伊始,Googl ...
- QML事件处理 八
1.MouseArea MouseArea 是一个不可见的项目,通常用来和一个可见的项目配合使用来为其提供鼠标处理.鼠标处理的逻辑可以包含在一个MouseArea项目中. MouseArea的enab ...
- 20145105 《Java程序设计》第1周学习总结
20145105 <Java程序设计>第1周学习总结 教材学习内容总结 学习了教材的第一章后,我初步了解了Java的发展历程,以及什么是JCP,JSR,JVM.JCP是一个开放性国际组织, ...
- linux内核分析第二周-完成一个简单的时间片轮转多道程序内核代码
中断时计算机运行的一个非常重要的功能.之所以重要,是因为由于种种原因,计算机不能将一个程序从头执行到尾不间断,而是可能会出现很多像等待输入设备输出设备的过程,如果没有中断系统,CPU只能等待,造成资源 ...
- Spring Data JPA中CrudRepository与JpaRepository的不同
使用Spring Data JPA CrudRepository 和JpaRepository 的好处: 继承这些接口,可以使Spring找到自定义的数据库操作接口,并生成代理类,后续可以注入到Spr ...
- Filter execute order in asp.net web api
https://stackoverflow.com/questions/21628467/order-of-execution-with-multiple-filters-in-web-api Som ...