使用此方法浏览器前进后退仍然可查看对应内容

两个方法的主要区别就是:pushState()是在history栈中添加一个新的条目,replaceState()是替换当前的记录值。用pushState的时候会产生一条新的history,replaceState则不会产生。

设置值

history.pushState({}, "页面标题", "xxx.html");
history.replaceState(null, "页面标题", "xxx.html");

比如设置 history.pushState({},"","#2"); 获取location.hash == “2”

某种意义上,调用pushState()有点类似于设置window.location='#foo',它们都会在当前文档内创建和激活新的历史记录条目。但pushState()有自己的优势:

  • 新的URL可以是任意的同源URL,与此相反,使用window.location方法时,只有仅修改 hash 才能保证停留在相同的document中。
  • 根据个人需要来决定是否修改URL。相反,设置window.location='#foo',只有在当前hash值不是foo时才创建一条新历史记录。
  • 你可以在新的历史记录条目中添加抽象数据。如果使用基于hash的方法,你只能把相关数据转码成一个很短的字符串。

注意pushState()方法永远不会触发hashchange事件,即便新的地址只变更了hash。

参考地址https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history

张鑫旭http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

pushState 和 replaceState的更多相关文章

  1. PJAX初体验(主要是利用HTML5 新增API pushState和replaceState+AJAX)

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

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

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

  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. hash 和pushState,replaceState

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

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

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

  7. HTML5 historyState pushState、replaceState

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

  8. H5,API的pushState(),replaceState()和popstate()用法

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

  9. HTML5新api即pushState和replaceState实现无刷新修改url

    1,首先我面临一个需求,页面回退时需要知道来之前的页面状态.很简单,回退时在url里赋参数即可.问题是在ipad上,回退按钮是安卓那边的,我控制不了.只好采用js无刷新修改url历史记录,来告诉服务器 ...

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

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

随机推荐

  1. photoshop cs5 key

    序列号: 1330-1164-2870-9234-4243-7879 1330-1027-8489-4513-0233-4890 1330-1176-2865-0373-1551-0175 1330- ...

  2. Java 字符串拼接 五种方法的性能比较分析 从执行100次到90万次

    [请尊重原创版权,如需引用,请注明来源及地址] > 字符串拼接一般使用“+”,但是“+”不能满足大批量数据的处理,Java中有以下五种方法处理字符串拼接,各有优缺点,程序开发应选择合适的方法实现 ...

  3. mysql查询表的数据大小

    在需要备份数据库里面的数据时,我们需要知道数据库占用了多少磁盘大小,可以通过一些sql语句查询到整个数据库的容量,也可以单独查看表所占容量. 1.要查询表所占的容量,就是把表的数据和索引加起来就可以了 ...

  4. man curl_easy_setopt(原创)

    中文翻译: curl_easy_setopt(3) libcurl 手册 curl_easy_setopt(3) 名称 curl_easy_setopt -curl的设置选项概要 #include & ...

  5. socket阻塞与非阻塞,同步与异步

    socket阻塞与非阻塞,同步与异步 作者:huangguisu 转自:http://blog.csdn.net/hguisu/article/details/7453390 1. 概念理解 在进行网 ...

  6. Oracle学习线路

    出自huyangg的博客,地址是:oracle学习路线图 1.sql.pl/sql(网上有很多的视频,可以做一个简单的入手,然后看几本书,多做实验)    作为oracle的基本功,需要大家对sql和 ...

  7. Oracle 左连接、右连接、全外连接、(+)号作用

    分类: Oracle Oracle  外连接 (1)左外连接 (左边的表不加限制)       (2)右外连接(右边的表不加限制)       (3)全外连接(左右两表都不加限制) 外连接(Outer ...

  8. Beta-1阶段成员贡献分(代组长更新)

    组名:天天向上 组长:王森 小组成员:张金生.张政.林莉.胡丽娜 小组贡献分如下:王森5.2   张金生5.1  张政 5.0   林莉 4.9 胡丽娜 4.8 成员得分如下: 成员 基础分 表现分 ...

  9. Android View的onTouchEvent和OnTouch区别

    还是以自定义的TestButton为例. 我们可以通过重写onTouchEvent方法来处理诸如down move up的消息: public class TestButton extends But ...

  10. (转)jQuery EasyUI Tree - TreeGrid动态加载子节点

    有时我们已经得到充分的分层树形网格(TreeGrid)的数据. 我们还想让树形网格(TreeGrid)按层次惰性加载节点. 首先,只加载顶层节点. 然后点击节点的展开图标来加载它的子节点. 本教程展示 ...