一、简介

HTML5引入了 history.pushState()和 history.replaceState()方法，它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate配合使用。

二、pushState() 方法的例子

假设在 http://mozilla.org/foo.html 中执行了以下 JavaScript 代码:

var stateObj = { foo: "bar" };

history.pushState(stateObj, "page 2", "bar.html");

这将使浏览器地址栏显示为 http://mozilla.org/bar.html，但并不会导致浏览器加载 bar.html ，甚至不会检查bar.html 是否存在。

假设现在用户又访问了 http://google.com，然后点击了返回按钮。此时，地址栏将显示 http://mozilla.org/bar.html，同时页面会触发 popstate 事件，事件对象state中包含了 stateObj 的一份拷贝。页面本身与 foo.html 一样，尽管其在 popstate  事件中可能会修改自身的内容。

如果我们再次点击返回按钮，页面URL会变为http://mozilla.org/foo.html，文档对象document会触发另外一个 popstate 事件，这一次的事件对象state object为null。 这里也一样，返回并不改变文档的内容，尽管文档在接收 popstate 事件时可能会改变自己的内容，其内容仍与之前的展现一致。

三、pushState() 方法

pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL. 让我们来解释下这三个参数详细内容：

状态对象 — 状态对象state是一个JavaScript对象，通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态，popstate事件就会被触发，且该事件的state属性包含该历史记录条目状态对象的副本。

标题 — 目前忽略这个参数被忽略，但未来可能会用到。传递一个空字符串在这里是安全的，而在将来这是不安全的。二选一的话，你可以为跳转的state传递一个短标题。

URL — 该参数定义了新的历史URL记录。注意，调用 pushState() 后浏览器并不会立即加载这个URL，但可能会在稍后某些情况下加载这个URL，比如在用户重新打开浏览器时。新URL不必须为绝对路径。如果新URL是相对路径，那么它将被作为相对于当前URL处理。新URL必须与当前URL同源，否则 pushState() 会抛出一个异常。该参数是可选的，缺省为当前URL。

四、pushState() 方法与设置hash值的区别

在某种意义上，调用 pushState() 与 设置 window.location = "#foo" 类似，二者都会在当前页面创建并激活新的历史记录。但 pushState() 具有如下几条优点：

新的 URL 可以是与当前URL同源的任意URL 。而设置 window.location 仅当你只修改了哈希值时才保持同一个文件。

如果需要，可以不必改变URL就能创建一条历史记录。而设置 window.location = "#foo";,只有在当前哈希不是 #foo 的情况下， 才会创建一个新的历史记录项。

我们可以为新的历史记录项关联任意数据。而基于哈希值的方式，则必须将所有相关数据编码到一个短字符串里。

五、replaceState() 方法

history.replaceState() 的使用与 history.pushState() 非常相似，区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。

六、popstate 事件

每当处于激活状态的历史记录条目发生变化时,popstate 事件就会在对应window对象上触发。 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝。

我们也可以直接在history对象上获取state，如下：

var currentState = history.state;

需要注意的是，调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。 opstate事件只会在浏览器某些行为下触发， 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)。

七、popstate 事件的例子

假如当前网页地址为 http://example.com/example.html ,则运行下述代码后:

window.onpopstate = function(event) {

  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));

};

//绑定事件处理函数.

history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1

history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2

history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3

history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"

history.back(); // 弹出 "location: http://example.com/example.html, state: null

history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

　　

八、pushState()的用途

王二使用 pushState() 主要是它可以监听到浏览器上的返回事件，这在移动端上也同样适用，参考如下一段代码(可以直接运行）：

<body>

    <div>window.onpopstate可以监听到返回键事件</div>

    <script>

        history.pushState({}, "");

        window.onpopstate = function(event) {

            //这里可以监听到浏览器的返回事件，并做你想做的事情，

            //例如：跳转到另一个网页

            location.href = "https://www.baidu.com";

        };

    </script>

</body>

　　

当然，用 window.onhashchange 也可以监听到浏览器上的返回事件，参考如下一段代码(可以直接运行）：

<body>

    <div>window.onhashchange可以监听到返回键事件</div>

    <script>

        setTimeout(()=>{

            location.hash="a"

        },100);

        setTimeout(()=>{

            window.onhashchange = function(event) {

                location.href = "https://www.baidu.com";

            }

        },200);

    </script>

</body>

　　

H5的pushState与replaceState的用法的更多相关文章

  1. H5，API的pushState()，replaceState()和popstate()用法

    pushState和replaceState是H5的API中新添加的两个方法.通过window.history方法来对浏览器历史记录的读写. pushState和replaceState 在 HTML ...

  2. 前端路由的实现(三) —— History的pushState和replaceState用法

    HTML5中history提供的pushState, replaceState这两个API.它们提供了操作浏览器历史栈的方法. pushState能够在不加载页面的情况下改变浏览器的URL.这个方法接 ...

  3. HTML5 history新特性pushState、replaceState

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

  4. HTML5 history新特性pushState、replaceState,popstate

    http://blog.csdn.net/tianyitianyi1/article/details/7426606 https://developer.mozilla.org/zh-CN/docs/ ...

  5. HTML5 historyState pushState、replaceState

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

  6. PJAX初体验（主要是利用HTML5 新增API pushState和replaceState+AJAX）

    说在前面 什么是PJAX呢? 站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化. 也不是什么新鲜技术,主要是AJAX+html5 pushState和re ...

  7. pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

    使用Ajax可以异步获取数据,可以更高效地渲染页面. 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好 1. 早前会使用浏览器的 hash ...

  8. hash 和pushState，replaceState

    hash 要点: 1.不会向后台发请求:#是用来指导浏览器动作的,对服务器端完全无用. 2.用来跳转到页面的指定位置:   为网页位置指定标识符,有两个方法.一是使用锚点,比如<a name=& ...

  9. 通过JS拦截 pushState 和 replaceState 事件

    history.pushState 和 history.replaceState 可以在不刷新当前页面的情况下更改URL,但是这样就无法获取通过AJAX得到的新页面的内容了.虽然各种HTML5文档说  ...

随机推荐

  1. opencv中自适应阈值函数的实现（c++）

    根据<面向飞机蒙皮接缝的线结构光检测技术研究_张卡>论文中的原理,编写了自适应阈值函数 原理: //计算灰度最大最小值 void MaxGrayValue(Mat image,int &a ...

  2. SQL Server注入

    1.利用错误消息提取信息 1.1 枚举当前表与列 --' 抛出错误:选择列表中的列 'users.id' 无效,因为该列没有包含在聚合函数或 GROUP BY 子句中. 发现表名为 'users',存 ...

  3. optparser模块 与 ZIP爆破（Python）

    optparser模块: 为脚本传递命令参数. 初始化: 带 Usage 选项(-h 的显示内容 Usage:): >>> from optparse import OptionPa ...

  4. 记一次Git提交报错的问题

    通常代码版本控制的步骤是: 在代码版本控制平台新建一个仓库 clone远程仓库到本地 开始编码,然后是一系列add,commit,push 我的步骤是: 在远程代码版本管理平台新建一个仓库 在本地新建 ...

  5. 如何使 JavaScript 更高效？

    传统的 Web 页面不会包含很多脚本,至少不会太影响 Web 页面的性能.然而,Web 页面变得越来越像应用程序,脚本对其的影响也越来越大.随着越来越多的应用采用 Web 技术开发,脚本性能的提升就变 ...

  6. 五、HashMap的使用 及其源码解析

    HashMap的底层实现原理?领接表(数组+链表)hash表数组+链表+红黑树 链表:查找慢 插入 删除快红黑树:查找快 插入 删除慢 HashMap是线程安全的吗?不是线程安全的 在什么情况下 ,是 ...

  7. sql创建临时表并且插入数据

    if OBJECT_ID('tempdb..#temp') is not null drop table #temp select * into #temp from ( --select * fro ...

  8. el-table——可编辑拖拽转换csv格式的表格

    <!--可拖拽的表格:表格内容+行参数+按钮名称(对话框标题)--> <template> <div> <el-button size="mini& ...

  9. [Selenium3+python3.6]自动化测试3-八种元素元素定位（Firebug和firepath）

    参考http://www.cnblogs.com/yoyoketang/p/6123890.html   #coding=utf-8 from selenium import webdriverdri ...

  10. Mybatis在xml文件中处理大于、小于、不等于号的方法

    在mapper.xml使用大于.小于等符号会和xml语法冲突,解决冲突有两种方式. 方法一: 使用转义字符: 字符名称 字符符号 转义字符 大于号 > > 小于号 < < 与 ...