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");

相关文章
|
1月前
|
API Python 容器
再探泛型 API,感受 Python 对象的设计哲学
再探泛型 API,感受 Python 对象的设计哲学
20 2
|
2月前
|
JavaScript 前端开发 API
什么是ES6的Proxy对象和Reactive API
【9月更文挑战第3天】什么是ES6的Proxy对象和Reactive API
28 9
|
3月前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
53 1
|
3月前
|
Java API 开发者
|
3月前
|
移动开发 API 开发者
什么是HTML5 History API有哪些应用场景
【8月更文挑战第11天】什么是HTML5 History API有哪些应用场景
53 1
|
3月前
|
移动开发 API 开发者
什么是HTML5 History API
【8月更文挑战第11天】什么是HTML5 History API
45 1
|
3月前
|
移动开发 前端开发 API
React路由和HTML5 History API有什么区别
【8月更文挑战第11天】React路由和HTML5 History API有什么区别
45 1
|
6天前
|
JSON API 数据格式
淘宝 / 天猫官方商品 / 订单订单 API 接口丨商品上传接口对接步骤
要对接淘宝/天猫官方商品或订单API,需先注册淘宝开放平台账号,创建应用获取App Key和App Secret。之后,详细阅读API文档,了解接口功能及权限要求,编写认证、构建请求、发送请求和处理响应的代码。最后,在沙箱环境中测试与调试,确保API调用的正确性和稳定性。
|
18天前
|
供应链 数据挖掘 API
电商API接口介绍——sku接口概述
商品SKU(Stock Keeping Unit)接口是电商API接口中的一种,专门用于获取商品的SKU信息。SKU是库存量单位,用于区分同一商品的不同规格、颜色、尺寸等属性。通过商品SKU接口,开发者可以获取商品的SKU列表、SKU属性、库存数量等详细信息。
|
19天前
|
JSON API 数据格式
店铺所有商品列表接口json数据格式示例(API接口)
当然,以下是一个示例的JSON数据格式,用于表示一个店铺所有商品列表的API接口响应