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

两个方法的主要区别就是: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. Centos apache + mysql + usvn 配置svn 服务器

    1.遇到问题 提交异常:'svn/!svn/me'path not found http://www.myexception.cn/cvs-svn/1262826.html 更改http.conf 配 ...

  2. C# 开源压缩组件比较

    SevenZipSharp check()为检查压缩包,有BUG,360创建的zip压缩包有无密码,密码错对都返回true DotNetZip 提供的函数比较人性化,缺点是只支持zip SharpCo ...

  3. 把cmd信息中的正常和异常输出分别输出到不同txt文件中

    场景一: 1.大量滚动信息容纳不下,在小黑屏中被冲刷掉. 2.希望把正常输出和异常输出分别输出到不同地方. 相关命令 一共有4个输出到文件的命令,现以jar命令打war包举例说明: 命令 说明 举例  ...

  4. Linux下错误的捕获:全局变量errno和strerror()

    经常在调用linux 系统api 的时候会出现一些错误,比方说使用open() write() creat()之类的函数有些时候会返回-1,也就是调用失败,这个时候往往需要知道失败的原因.这个时候使用 ...

  5. Git学习(三)——暂存区、远程仓库、增删改管理

    一.工作区和暂存区 工作区(Working Directory) 就是在你的电脑里能看到的目录 版本库(Repository) 工作区中的一个隐藏目录.git,这个不算工作区,而是Git版本库.Git ...

  6. web程序员该学习什么

    以我个人的观点分了几个级别,仅供参考 初级发展(学习期) 前端应该学习HTML javascript css 能够制造简单的前端页面满足自己的工作需求 后端应该学习asp.net or jsp or ...

  7. adb devices 不识别设备(或者偶尔识别设备) -破解

    问题:当在CMD中输入adb devices时,没有设备信息显示,居然显示下面的信息 问题是有时候可以识别,有时候不可以识别.当被别人连接后,自己在连接是好的,过了一会以后又不好了

  8. Ant: Class not found: javac1.8

    今天用ant,在选择build.xml,run as ant build后出错Ant: Class not found: javac1.8 分析问题:是否是eclipse中的ant版本和java的版本 ...

  9. PHP与memcache安装使用说明

    最近网站流量上来后,数据库连接数一直偏高,分析了下,都是正常请求,只是网站功能分的细,单页面数据库查询句偏多了,很多数据是没必要实时查询,缓存起来就可以的!考虑必须用memcache缓存了,减轻mys ...

  10. jvm、jre、jdk

    JVM和JRE浅谈 Java运行时环境JRE包含:Java虚拟机.库函数.运行Java应用程序和Applet所必须的文件,JDK(又称SDK)包含:JRE的超集.编译器.调试器等开发工具. java平 ...