history对象和HTML5 History API

简介: history对象和HTML5 History API

history对象和HTML5 History API

history.back()     // 返回上一个访问的页面,等同于浏览器的返回按钮
history.forward()  // 移动到下一个访问页面,等同于浏览器的前进按钮
history.go()       // 参数为一个整数
history.go(-1)     // 等同于 history.back()
history.go(1)      // 等同于 history.forward()
history.go(0)      // 等同于刷新当前页面

增加的属性

1、History.state() 返回一个表示历史堆栈顶部的状态的值,只是一种可以不必等待 popstate事件查看状态的方式。
2、History.scrollRestortion():允许Web应用程序在历史导航上显示地设置默认滚动恢复行为。此属性可以是自动的(auto),或者手动的(manual)

增加的方法

1、History.pushState():按指定的名称和URL(如果提供该参数),将数据push进会话历史栈,数据被DOM进行不透明处理,你可以指定任何可以被序列化的js对象。

pushState() 需要三个参数:
1、一个状态对象,
2、一个标题 (目前被忽略), 、
3、一个URL(可选的) 必须和当前页面同源,为空则为当前页面url.另外如果是相对地址则是相对于当前url处理。
例子:
var stateObj = { foo: "bar" };
    history.pushState(stateObj, "page 2", "bar.html");

2、History.replaceState():按指定的数据,名称和URL(如果提供该参数),更新历史栈上最新的入口。这个数据被DOM进行了不透明处理。你可以指定任何可以被序列化的js对象。

1、history.replaceState()的使用与 history.pushState() 非常相似,区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。
2、replaceState() 的使用场景在于为了响应用户操作,你想要更新状态对象state或者当前历史记录的URL。
3、history.replaceState(stateObj, "page 3", "bar2.html");

相关文章
|
2月前
|
API Python 容器
再探泛型 API,感受 Python 对象的设计哲学
再探泛型 API,感受 Python 对象的设计哲学
23 2
|
3月前
|
JavaScript 前端开发 API
什么是ES6的Proxy对象和Reactive API
【9月更文挑战第3天】什么是ES6的Proxy对象和Reactive API
33 9
|
4月前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
57 1
|
4月前
|
Java API 开发者
|
4月前
|
移动开发 API 开发者
什么是HTML5 History API有哪些应用场景
【8月更文挑战第11天】什么是HTML5 History API有哪些应用场景
75 1
|
4月前
|
移动开发 API 开发者
什么是HTML5 History API
【8月更文挑战第11天】什么是HTML5 History API
60 1
|
4月前
|
移动开发 前端开发 API
React路由和HTML5 History API有什么区别
【8月更文挑战第11天】React路由和HTML5 History API有什么区别
50 1
|
13天前
|
人工智能 自然语言处理 API
Multimodal Live API:谷歌推出新的 AI 接口,支持多模态交互和低延迟实时互动
谷歌推出的Multimodal Live API是一个支持多模态交互、低延迟实时互动的AI接口,能够处理文本、音频和视频输入,提供自然流畅的对话体验,适用于多种应用场景。
62 3
Multimodal Live API:谷歌推出新的 AI 接口,支持多模态交互和低延迟实时互动
|
8天前
|
前端开发 API 数据库
Next 编写接口api
Next 编写接口api
|
14天前
|
XML JSON 缓存
阿里巴巴商品详情数据接口(alibaba.item_get) 丨阿里巴巴 API 实时接口指南
阿里巴巴商品详情数据接口(alibaba.item_get)允许商家通过API获取商品的详细信息,包括标题、描述、价格、销量、评价等。主要参数为商品ID(num_iid),支持多种返回数据格式,如json、xml等,便于开发者根据需求选择。使用前需注册并获得App Key与App Secret,注意遵守使用规范。