坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › history对象和HTML5 History API

history对象和HTML5 History API

坚果大叔
2018-10-27 8:34:07技术阅读 2,108

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");
History
赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 坚果大叔。未经许可,禁止转载。
js中的各种width,height
上一篇
Git相关操作及术语(转载)
下一篇
在小程序中查看
搜你想看的
聚合文章
Mac 如何安装mongoDB
JS生成随机验证码校验(前端)
生活就是每一帧每一秒
一款高仿mac版微信的单页面应用(还在更新中)
闲言碎语
Memos
Element Plus Upload 添加支持拖拽排序~
2025-07-30 20:55:55
481 0 0
Nuxt3中piana持久化处理!
2025-06-22 18:45:45
622 0 2
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
1,116 0 1
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
7,855 3
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
326
文章
137
评论
397
喜欢