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 Demo
History | Can I Use
Session history and navigation
Manipulating the browser history
History.js polyfill
History | MDN
popstate
jquery-pjax
转载于:https://www.cnblogs.com/cloud-/p/8276543.html
Session History 属性和方法相关推荐
- 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节 查看作业目录 需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具 实现思路: 使用history对象中的 forward() 方法和 ...
- javascript window 属性和方法。
closed 获取引用窗口是否已关闭. defaultStatus 设置或获取要在窗口底部的状态栏上显示的缺省信息. dialogArguments 设置或获取传递给模式对话框窗口的变量或变量数组. ...
- BOM的window对象的属性及其方法
Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY.FRAMESET或 FRAME元素时,都会自动建立window对象的实例. ...
- Vue父组件访问子组件属性和方法、父子组件双向绑定(两种方法)
Vue父组件访问子组件属性和方法.父子组件双向绑定(两种方法) 1. 使用vue-cli创建项目 目录结构如下图: 2. 编写代码 src/components/HelloWorld.vue < ...
- TWebBrowser 与 MSHTML(3): window 对象的属性、方法、事件纵览
这还不是 TWebBrowser 控件的属性.方法.事件; 这和浏览器中 JavaScript 的 window 对象是基本一致的. window 对象是网页脚本中的顶层对象, 它代表网页的窗口.或一 ...
- HTML DOM属性和方法
1.Attr对象 1.1.属性和方法 属性 / 方法 描述 attr.isId 如果属性是 id 类型,则返回 true,否则返回 false. attr.name 返回属性的名称. attr.val ...
- 正则,JWT token,容联云,celery,频道组,SKU,SPU,request对象的属性和方法的补充知识
?P 正则中分组匹配 [/^!@#$%] 正则中的非!@#¥% ? 非贪婪匹配 + 重复一次,贪婪匹配 re.I 忽略大小写 用户登录: JWT 会话保持?为什么会话保持? 会话保持是负载均衡最 ...
- JavaScript 中BOM及window的相关属性及方法
概述:BOM (全称bowser object model) 浏览器对象模型,他是用于操作浏览器相关的内容.BOM是一个缺乏规范的东西,为了保证他的规范性产生了一系列的共用对象来解决这个问题.沿用至今 ...
- 对象不支持此属性或方法: 'Response.CharSet'
[转载]对象不支持此属性或方法: 'Response.CharSet' 给客户开发的一个web系统,本来计划是在IIS下运行,无奈客户那边的电脑操作系统IIS无论怎样都安装不了,总不能要求客户为了这个 ...
最新文章
- 学习笔记第三十一节课
- IDEA 2021.3 正式发布:支持远程开发、故障排查、Java和Spring等多项优化改进
- 中医药可投期刊推荐-24本-2021版
- Linux+apache+svn
- leetcode 203 移除链表元素 C++
- Vue插件_自己封装插件_以及使用自定义插件---vue工作笔记0017
- 突然发现foxmail原来是腾讯的
- Windows远程桌面单/多用户同时登录
- idea Process finished with exit code -1073741819 (0xC0000005)
- matlab制作太阳系模型,一种太阳系模型的制作方法
- Python3批量爬取指定微博中的图片
- 初学JAVA项目(11、Ada银行-3)
- 3D建模学习对于电脑配置要求高不高?显卡内存等全方面解析,小白福音
- OpenCV在win10安装
- Cannot forward to error page for request ......
- SpringCloud之Eureka客户端服务启动报Cannot execute request on any known server解决
- C语言:判断一个数是否为素数
- 《薛兆丰经济学讲义》读书笔记6-10章
- 普通电脑安装黑苹果mac系统
- NVIDIA显卡驱动
热门文章
- linux下和htm的运行,嵌入式LINUX下CGI与HTML网页之间的通信
- 如何从外网向内网传东西_鱼缸内出现气泡还会不断缓缓升起,是什么东西,如何处理和解决?...
- 进程间的六种通信方式
- Java中 java.io.IOException: Broken pipe
- 罗马仕php30重量,充电宝多少毫安最好?这3款罗马仕充电宝必须收藏
- python基础七--集合
- Fit项目分页组件的编写
- 在使用Vs2013打开Vs2008的解决方案时出现了以下错误:此版本的应用程序不支持其项目类型(.csproj)...
- swift版本hello
- 陶哲轩实分析 命题7.2.5 证明