HTML5 history新特性pushState、replaceState

2023-11-11

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页面,即使这个页面存在也不会加载。

现在再次假设用户继续访问http://google.com,然后点击后退。这时,url地址栏将会,http://mozilla.org/bar.html,页面会得到popstate事件(chrome),这个状态对象会包含一个stateObj的copy。这个页面看起来像foo.html。+

这时,我们再次点击后退,URL将变成http://mozilla.org/foo.html,document将得到另一个popstate事件和为null的state对象。这次的返回动作并没有改变文档的内容。(也许会过一会尝试加载…chrome)

pushState方法

pushState()有三个参数:state对象,标题(现在是被忽略,未作处理),URL(可选)。具体细节:

·        state对象 –state对象是一个JavaScript对象,它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史 记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象,这个对象的最大存储空间为640k。如果大于这个数 值,则pushState()方法会抛出一个异常。如果确实需要更多的空间来存储,请使用本地存储。

·        title—firefox现在回忽略这个参数,虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串,以防止将来的修改。或者可以传一个简短的标题来表示state

·        URL这个参数用来传递新的history实体的URL,注意浏览器将不会在调用pushState()方法后加载这个URL。但也许会过一会尝试加载这个URL。比如在用户重启了浏览器后,新的url可以不是绝对路径。如果是相对路径,那么它会相对于现有的url。新的url必须和现有的url同域,否则pushState()将抛出异常。这个参数是选填的,如果为空,则会被置为document当前的url

某种意义上来说,调用pushState()方法很像设置了window.location = “#foo”,这两者都会创建和激活另一个关联到当前document的history实体,但pushState()另外有一些优点:

l 新的url可以是任何和当前url同域的url,相比之下,如果只设置hash,window.location会保持在同一个document。

l 如果不需要,你可以不修改url。对比而言,设置window.location = “#foo”;仅产生新的history实体,如果你当前的hash不是#foo

l 你可以将任意的数据与你的新history实体关联。使用基于hash的方法,需要将所有相关的数据编码为一个短字符串。

注意,pushState()方法不会使hashchange时间发生,即使是新旧url只是hash不同。

replaceState()方法

history.replaceState() 用起来很像pushState(),除了replaceState()是用来修改当前的history实体而不是创建一个新的。这个方法有时会很有用,当 你需要对某些用户行为作反应而更新一个state对象或者当前history实体时,可以使用它来更新state对象或者当前history实体的url。

popstate事件

当history实体被改变时,popstate事件将会发生。如果history实体是有pushState和replaceState方法产生的,popstate事件的state属性会包含一份来自history实体的state对象的拷贝

详见window.onpopstate

读取当前的state

读取现有state

当页面加载时,它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。当页面重新加载,页面将收到onload事件,但不会有popstate事件。然而,如果你读取history.state属性,将在popstate事件发生后得到这个state对象



源引:http://blog.csdn.net/tianyitianyi1/article/details/7426606

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML5 history新特性pushState、replaceState 的相关文章

  • 为什么 runState 签名只有 state 参数?

    一个现实生活中的例子 如果我心情很好 良好状态 当经理问我有关估算时 我给了他一个可靠的答案 但他敢这样做3次吗in a row 中间没有一些免费零食 我的情绪发生了变化 我变得 糟糕的状态 接下来的 3 次他走近时 我要求他不要用任何废话
  • Android:检查服务是否正在运行。绑定服务

    检查 Android 服务是否正在运行的最佳方法是什么 我知道ActivityManagerAPI 但对于与我类似的场景 似乎不建议使用API source http www mail archive com android develop
  • 为什么Python语言没有writeln()方法?

    如果我们需要向文件写入新行 我们必须编写以下代码 file output write Fooo line n Python 没有任何原因吗 writeln method 在 Python 2 中 使用 print gt gt file ou
  • React setState 不更新状态

    所以我有这个 let total newDealersDeckTotal reduce function a b return a b 0 console log total tittal outputs correct total set
  • jQuery UI 选项卡后退按钮历史记录

    有谁能够让 jQuery UI Tabs 3 最新版本 与后退按钮一起使用吗 我的意思是 如果用户点击后退按钮 他们应该转到页面上之前访问过的选项卡 而不是其他页面 历史记录插件听起来好像可以工作 但我似乎无法让它与 ajax 加载选项卡
  • android:媒体记录器:启动失败:-38

    简介 如何检查录音是否已在其他应用程序的后台运行 详细信息 如果录音已在本机应用程序的后台运行 录音机 现在我已将录音作为我的应用程序中的功能之一 问题 当我尝试同时在我的应用程序中录制时 出现错误 E MediaRecorder star
  • C# Winforms:以编程方式显示按钮悬停状态

    我在 winform 上显示数字键盘来输入代码 我正在显示带有按钮的数字键盘 用户将仅使用键盘数字键盘来输入代码 密码 但当然你可以使用鼠标 如果我们使用鼠标单击按钮 我们会得到蓝色效果来显示悬停和按下状态 我在想我是否可以以某种方式以编程
  • Haskell:Yesod 和状态

    我正在阅读代码玩具 URL 缩短器 http flygdynamikern blogspot com au 2011 06 toy url shortener with yesod and acid html 然而 有一些重要的部分我就是无
  • 完成活动后如何取下键盘?

    我有一个用户在其中输入的活动 然后单击 确定 按钮 完成后 活动关闭并返回到旧活动 但软键盘仍然在屏幕上 我试过了android windowSoftInputMode stateHidden and getWindow setSoftIn
  • 单击浏览器的后退按钮时重定向到特定页面

    这是一个有点菜鸟的问题 但事实就是这样 我有一个网站 用户只能通过下一页和后退按钮从一个页面导航到另一个页面 即有一个用户必须遵循的向导 向导的一部分包含不同的页面 一部分包含相同的页面但具有更改的 div 但从用户体验来看 它是不同的页面
  • 为什么 SQL Server DATETIME 类型可以节省 1/300 秒的时间?

    SQLServer 日期时间格式存储为 8 个字节 其中前四个字节是自 1900 年 1 月 1 日以来的天数 其他四个字节是自午夜以来的刻度数 刻度为秒的 1 300 我想知道这是为什么 那1 300是从哪里来的呢 这其中一定有一些历史原
  • 替换 Haskell 中的单个列表元素?

    我有一个元素列表 我希望更新它们 由此 Off Off Off Off 对此 Off Off On Off 由于我对 Haskell 有点陌生 所以我一直在使用 x xs y使用以下函数提取和更新各个组件 replace y z repla
  • 在 Backbone.js 中使用状态并登录用户

    我需要检查用户是否已登录并经过身份验证 然后才能让我的用户使用我的backbone js基于应用程序 用户身份验证作为属性存储在本机主干模型中 我在启动主路由器之前通过调用进行检查Backbone history start 这样 未经身份
  • 标签可以在 git filter-branch 和 rebase 之后自动移动吗?

    edit问题归结为 可以git rebase也被指示对标签进行变基吗 但是对最初问题的回答也会有所帮助 Asking 如何将过去添加到 git 存储库中 https stackoverflow com questions 3147097 h
  • ui-router 中 templateUrl 从一种状态动态更改为另一种状态

    html a target blank t name a 上面的代码位于 ng repeat 中 其中许多模板链接加载了名称和 id 因此当我单击每个链接时 href 将更新 并将 id 号附加到所选模板链接 我使用相同的控制器生成大约十个
  • 如何使用react将对话框中的数据发送回父容器?

    我有一个反应大日历 http intljusticemission github io react big calendar examples index html 父容器 我还有一个选择 根据此选择 医生姓名 获取日历的事件 并且当我单击
  • 如何根据另一个字段的值禁止 TFS 要求工作项中的状态从“建议”更改为“活动”?

    I ve added department approvals to the standard CMMI Template Requirement work item I d like to limit the System State f
  • 更改输入状态会延迟一个字符(useState 挂钩)

    我正在尝试在我的社交网络中实现用户个人资料的即时搜索 它似乎有效 但在输入更改时设置状态 使用挂钩 会导致延迟一个字符 我研究了一下 发现状态延迟的问题可以通过在 setState 中使用回调函数来解决 但是 useState 不支持这一点
  • 如何使用react-router维护状态

    我有一个 React 应用程序 其中包含一个保存初始状态的主 App js 文件 然后 我设置了一些路线来导航我的应用程序 在其中一条路线中 我有一个按钮 按下该按钮会处理设置的状态 我知道这是有效的 因为我已经控制台记录了状态的变化 然而
  • 在 Linux 中禁用历史记录 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 要在 Linux 环境中禁用历史记录 我执行了以下命令 export HISTFILESIZE 0 export HISTSIZE 0 u

随机推荐

  • 学点Selenium玩点新鲜~新的一年,让分布式测试有更多玩法

    我们都知道 Selenium 是一款在 Web 应用测试领域使用的自动化测试工具 而 Selenium Grid 是 Selenium 中的一大组件 通过它能够实现分布式测试 能够帮助团队简单快速在不同的环境中测试他们的 Web 应用 分布
  • 详细介绍如何在linux中配置chisel环境

    一 安装java和scala 1 安装java 安装java sudo apt install openjdk 11 jre headless 安装javac sudo apt install openjdk 11 jdk headless
  • ubuntu 18.04 RTX2080(ti) --- tensorflow-gpu + cuda9.0 + cudnn-9.0 (ubuntu 16.04, TITAN XP)

    0 下载display driver cuda和cudnn RTX2080 Display Driver cuda cudnn 版本对应关系 1 禁止系统默认的显卡驱动 打开系统黑名单 sudo gedit etc modprobe d b
  • C++11新特性,推荐使用emplace_back()替换push_back()的原因

    TOC c 11新加入了emplace back 用来替换push back 在平时我们习惯性的尾插用push back 去完成 但是如果是尾插临时对象的话 push back 需要先构造临时对象 再将这个对象拷贝到容器的末尾 而empla
  • mmsegmentation安装教程,简单易懂,必能成功

    一 安装anaconda 这个自己弄一路默认就行或者你想改个路径也行 无所谓 安装好之后打开anaconda prompt控制面板 换成清华源 pip config set global index url https pypi tuna
  • 数字IC后端设计技术全局观

    数字IC后端设计flow 不含DFT 数字IC后端设计工具 DC 用于逻辑综合 FM 用于形式验证 ICC 用于物理实现 PrimeTime 用于STA 步骤 或文件类型 简述 RTL Register Transfer Level v文件
  • mysql8.0收费价格,MySQl 8.0遇到的坑

    报错 Illuminate Database QueryException SQLSTATE HY000 1045 Access denied for user root localhost using password NO SQL cr
  • Trying to access array offset on value of type int

    问题描述 出现报错信息 先百度翻译 试图访问int类型值的数组偏移量 通过翻译得知 int型的数据被其他不能使用的类型使用了 个人理解 关于这块 php7 4升级之后会有这个bug 网上大多人是说 7 4 版本的向后不兼容更改 非数组的数组
  • valgrind Massif

    valgrind检查内存泄露 valgrind 程序 内存泄漏问题 我们有memcheck工具来检查 很爽 但是有时候memcheck工具查了没泄漏 程序一跑 内存还是狂飙 这又是什么问题 其实memcheck检查的内存泄漏只是狭义的内存泄
  • Docker——安装和启动

    一 环境准备 1 安装Linux虚拟机软件 VMware或VirtualBox 比VMware更小巧轻便且免费 此处安装VirtulaBox 2 安装Linux虚拟系统 在管理中选择导入虚拟电脑 记得选中重新初始化所有网卡的MAC地址 双击
  • Dynamics CRM 365 如何设置经典登录页面

    Don t be surprised If you don t see classic interface post your sign up for dynamics 365 Okay let s face it We are losin
  • 复选框check的选中、不选中设置以及判断是否选中

    复选框的设置 一 JavaScript判断是否选中checkbox框 二 JavaScript设置选中checkbox框 三 JavaScript移除选中checkbox框 四 使用jQuery判断是否选中checkbox框 五 使用jQu
  • 国密(1) - 私钥Key文件( PEM格式)编解码方法

    详细的PEM文件格式解析 PEM文件 是按照私钥的ASN 1的格式 RFC5208 5915 5480 进行DER编码后输出二进制串的基础上 再进行Base64的编码 也就是每6个bit为一组 生成一个ascii码字符 需要4组6个bit
  • 学习笔记59—收藏这7个在线配色神器,再也不愁配色灵感了

    在设计中配色方案是必要的 也是让设计师头疼的一个问题 所以 编辑专为大家整理了一波配色神器网站 不用下载任何应用程序 打开即用 不仅能快速的做出符合设计概念的颜色组合 且有很多样品供你确认的工具 设计新手们千万别错过了 一 Khroma h
  • 【macOS】Win通过VNC远程控制Macbook

    Win通过VNC远程控制Macbook 参考 https zhuanlan zhihu com p 74162964 仅局域网内可用 Macbook配置 进入 电脑设置 勾选两个选项 Windows配置 安装VNC Viewer https
  • openpyxl操作表格的基本用法

    创建文件 以及创建xlsx表格 from openpyxl import Workbook load workbook import os 创建excel文件 默认会有一个sheet命名的表 def create xlsx path nam
  • Beginng_Rust(译):借用和生命周期(第二十二章)

    在本章中 您将学习 借用 和 生命周期 的概念 哪些是关于借用的典型编程错误 即困扰系统软件 Rust严格语法如何使用借用检查器来防止此类典型错误 插入块的方式如何限制借用范围 为什么函数返回引用需要生命周期指示符 如何使用寿命指定符来表示
  • 应用层的原理

    目录 应用层协议原理 网络应用程序体系结构 客户 服务器 P2P 混合模式 UDP TCP 所有能产生网络流量的程序 应用层协议原理 网络应用程序体系结构 客户 服务器 P2P 混合模式 UDP TCP 可供应用程序使用的运输服务 因特网提
  • 解决liquibase.exception.LockException: Could not acquire change log lock. Currently locked by XXXX

    项目启动后报liquibase exception LockException Could not acquire change log lock 解决方案 执行下面语句 use job job为你的数据库 select from DATA
  • HTML5 history新特性pushState、replaceState

    DOM中的window对象通过window history方法提供了对浏览器历史记录的读取 让你可以在用户的访问记录中前进和后退 从HTML5开始 我们可以开始操作这个历史记录堆栈 1 History 使用back forward 和go