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

相关文章
|
4天前
|
存储 JavaScript 前端开发
HTML API
HTML API
27 3
|
8月前
|
API
使用 Schematics 创建的 Spartacus Storefront,在 index.html 里指定 OCC API url
使用 Schematics 创建的 Spartacus Storefront,在 index.html 里指定 OCC API url
43 0
|
4天前
|
SQL API Python
Python DB API下规范下cursor对象常用接口
Python DB API下规范下cursor对象常用接口。
22 4
|
4天前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
15 4
|
4天前
|
移动开发 API UED
【专栏:HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计,使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者,可创建图片排序、手势识别等交互功能,但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具,能提升用户体验,推动网页交互设计创新。
|
4天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
4天前
|
移动开发 前端开发 API
简述HTML5 Canvas的基本绘图API及其在游戏开发中的作用。
HTML5 Canvas 提供丰富的绘图API,用于在网页上绘制图形、动画和视觉效果,支持基本形状、文本、渐变、图像及像素操作。在游戏开发中,Canvas API用于绘制游戏元素、实现动画效果、进行物理碰撞检测,并具备跨平台兼容性,为创新游戏体验提供强有力的支持。
14 1
|
4天前
|
移动开发 API HTML5
HTML5响应式自动采集API壁纸系统源码自适应手机端
HTML5响应式自动采集API壁纸系统源码自适应手机端
44 11
HTML5响应式自动采集API壁纸系统源码自适应手机端
|
4天前
|
编解码 JavaScript 前端开发
BOM和DOM:BOM(浏览器对象模型)提供了与浏览器交互的能力,如弹窗、定时器等;DOM(文档对象模型)提供了操作HTML元素的能力,如获取、修改元素内容和属性。
BOM和DOM:BOM(浏览器对象模型)提供了与浏览器交互的能力,如弹窗、定时器等;DOM(文档对象模型)提供了操作HTML元素的能力,如获取、修改元素内容和属性。
42 2
|
5月前
|
存储 JavaScript 前端开发
使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
76 0