• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 深入了解h5中history特性--pushState、replaceState

深入了解h5中history特性--pushState、replaceState

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含h5,history,pushState,replaceState等相关知识,匿名希望在学习及工作中可以帮助到您
DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退。

从HTML5开始,我们可以开始操作这个历史记录堆栈。

1.History

使用back(),forward(),和go()方法可以在用户的历史记录中前进和后退

前进和后退

后退:

window.history.back();

这个方法会像用户点击了浏览器工具栏上的返回键一样。

同样的,也可以用以下方法产生用户前进行为:

window.history.forward();

移动到历史记录中特定的位置

你可以使用go()方法从session历史中载入特定的页面。

向后移动一页:

window.history.go(-1);

向前移动一页:

window.history.go(1);

类似的,你可以前进或者后退多页。

还可以通过检查浏览器历史记录的length属性来找到历史记录堆栈中的页面总数。

var numberOfEntries = window.history.length;

注意:IE支持向go()方法传URL参数。

2.添加和修改history实体

自Gecko2开始引入 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

HTML5引入了histtory.pushState()和history.replaceState()这两个方法,他们允许添加和修改history实体。同时,这些方法会和window.onpostate事件一起工作。

使用history.pushState()方法来修改referrer,这种方法可以被用在经过修改状态后而为xmlhttpRequest对象创建的http header中。这个referrer会是创建XMLHttpRequest 时document的URL。

pushState 用于向 history 添加当前页面的记录,而 replaceState 和 pushState 的用法完全一样,唯一的区别就是它用于修改当前页面在 history 中的记录。

例子

假设http://mozilla.org/foo.html页面执行了一下JS

var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");

这种方法将会使url地址栏显示http://mozilla.org/bar.html,但浏览器不会加载bar.html页面,即使这个页面存在也不会加载。

您可能想查找下面的文章:

  • 详解HTML5之pushstate、popstate操作history,无刷新改变当前url
  • HTML5各种头部meta标签的功能(推荐)
  • 如何用H5实现一个触屏版的轮播器的实例
  • H5新属性audio音频和video视频的控制详解(推荐)
  • HTML5页面音视频在微信和app下自动播放的实现方法
  • H5 meta小结(前端必看篇)
  • 浅谈h5自定义audio(问题及解决)
  • h5调用摄像头的实现方法
  • HTML5单页面手势滑屏切换原理
  • Html5实现二维码扫描并解析

相关文章

  • 2018-12-03自定义HTML5 Progress的样式的图文代码详解
  • 2018-12-03(Server-sent Events)浅谈H5 中的服务器推送事件
  • 2018-12-03什么是标准模式?总结标准模式的实例用法
  • 2018-12-03Html5中postmessage实现子父窗口传值的代码
  • 2018-12-03详解HTML5的video标签的浏览器兼容性增强方案
  • 2018-12-03HTML5中的header标签是什么意思?HTML5中header标签具体使用方法你知道吗?
  • 2018-12-03HTML5学习笔记简明版(6):新增属性(1)
  • 2018-12-03实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码_html5教程技巧
  • 2017-08-06HTML5中的新元素介绍
  • 2018-12-03如何使用HTML5 Shiv解决IE不兼容HTML5标签的方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5 新旧语法标记对我们有什么好处_html5教程技巧
    • HTML5应用-欢乐老虎机的实现代码
    • 关于9个经典华丽的HTML5图表应用 详情介绍
    • html5 Canvas画图教程(5)—canvas里画曲线之arc方法
    • h5输入框提示语 + 正常文本框提示语的实现方法
    • HTML5打开本地app应用的方法_html5教程技巧
    • HTML5实践-在非响应式设计中如何使用ViewPort meta标签的方法介绍
    • input type="submit" 和"button"有什么区别?
    • HTML5实现获取地理位置信息并定位功能
    • HTML5 canvas画布详解(一)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有