这个功能可以进行传参，还可以解决ajax无法前进和倒退的问题

首先，history新增的两个方法history.replaceState()和history.pushState()方法属于HTML5浏览器新增的属性，所以IE9以下的是不支持的。

直接上代码：

history.replaceState() 顾名思义就是替换的意思，所以它的作用就是替换当前地址栏的url

  1. <!DOCTYPE HTML>
  2. <head>
  3. <script src="jquery-1.8.2.min.js"></script>
  4. <style>
  5. </style>
  6. <script>
  7. $(function(){
  8. $("#bt").click(function(){
  9. history.replaceState({data:111},"1222","aa.html");
  10. return false;
  11. });
  12. })
  13. </script>
  14. </head>
  15. <body class="sapUiBody">
  16. <input type="button" id="bt" value="show">
  17. </body>

点击按钮后，可以看到页面地址栏的地址变了，但是页面并没有刷新。

history.replaceState(data,"页面的title","需要改变的url") 接收三个参数

history.pushState() 看到push大家首先应该想到的是数组，没错，这个方法就是往浏览器的history里压入一条url，就像数据结构里的栈一样，这个压入的url会在栈

的最顶端，当你点击浏览器的前进或者倒退按钮时，便会拿出栈顶的url来定位，从而达到改变history的作用但是并不刷新！

  1. <!DOCTYPE HTML>
  2. <head>
  3. <script src="jquery-1.8.2.min.js"></script>
  4. <style>
  5. </style>
  6. <script>
  7. $(function(){
  8. $("#bt").click(function(){
  9. history.pushState({data:111},"1222","aa.html");
  10. history.pushState({data:111},"1222","ab.html");//多压入几条
  11. return false;
  12. });
  13. })
  14. </script>
  15. </head>
  16. <body class="sapUiBody">
  17. <input type="button" id="bt" value="show">
  18. </body>

其次是

window.addEventListener('popstate', function(event) {     
   console.log(event.state);//data 

});

还记得上面的pushState方法么，当你往history的栈里通过调用这个方法压入多条数据时，并且你通过点击浏览器的前进倒退按钮进行改变的时候，这个事件就触发了，然后就

是event.state就是上面方法的第一个参数data，并且是和url一一对应的，这样就实现了传值

  1. <!DOCTYPE HTML>
  2. <head>
  3. <script src="jquery-1.8.2.min.js"></script>
  4. <style>
  5. </style>
  6. <script>
  7. $(function(){
  8. $("#bt").click(function(){
  9. history.pushState({data:111},"1222","aa.html");
  10. history.pushState({data:111},"1222","ab.html");//多压入几条
  11. return false;
  12. });
  13. window.addEventListener('popstate', function(event) {
  14. console.log(event.state);
  15. });
  16. })
  17. </script>
  18. </head>
  19. <body class="sapUiBody">
  20. <input type="button" id="bt" value="show">
  21. </body>

最后，通过这种方法可以在popstate的事件里写自己的逻辑了，如发送ajax等

html5 history 信息api pushState的更多相关文章

  1. HTML5 history新特性pushState、replaceState

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

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

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

  3. HTML5 History API 实现无刷新跳转

     在HTML5中, 1. 新增了通过JS在浏览器历史记录中添加项目的功能. 2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 3. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三 ...

  4. HTML5 History API实现无刷新跳转

    在HTML5中, 新增了通过JS在浏览器历史记录中添加项目的功能. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三点,可以实现在不刷新 ...

  5. HTML5 history API实践

    一.history API知识点总结 在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...

  6. 转: html5 history api详解~很好的文章

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  7. HTML5 History API让ajax能回退到上一页

    HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...

  8. window.history的跳转实质－HTML5 history API 解析

    在上一浏览器跳转行为的测试中,我们看到了通过不同的方法操作浏览器跳转时,它的刷新表现有所不同,在这一文章中,将看看,为何会产生这样的不同?其背后的实质是什么?浏览器的访问历史记录到底是如何运作的呢? ...

  9. HTML5 history API，创造更好的浏览体验

    HTML5 history API有什么用呢? 从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残 ...

随机推荐

  1. 使用ant对JS/CSS 进行压缩以提高网站性能

    减少HTTP请求是优化网站速度的一个重要手段, 所以对javascript/css两种文件进行压缩或合并都是非常必要的. 这里介绍利用ANT来自动进行文件合并和压缩. 3.1. javascript文 ...

  2. 在eclipse中, 如何快速输入(快捷键)System.out.println();

    1.快速输入(快捷键)System.out.println(); 首先输入sysout或syso,然后ALT+/ System.out.println(); 2.快速输入(快捷键)System.err ...

  3. 部署phpmyadmin登录不进去

    Centos7.5 部署phpmyadmin登录不进去 问题:明明输对了账号和密码就是登录不进去,但是用ip就能登录 解决方法:换个域名 [root@web01 code]# vim /etc/ngi ...

  4. SpringBoot 通过token进行身份验证，存储redis

    代码: public interface TokenManager { /** * 创建token * @param userInfo * @return */ String getToken(Use ...

  5. 全排列+字符串查找|扑克排序|2014年蓝桥杯A组题解析第六题-fishers

    标题:扑克序列 A A 2 2 3 3 4 4, 一共4对扑克牌.请你把它们排成一行. 要求:两个A中间有1张牌,两个2之间有2张牌,两个3之间有3张牌,两个4之间有4张牌. 请填写出所有符合要求的排 ...

  6. Windows FindFirstFile利用

    目前大多数程序都会对上传的文件名加入时间戳等字符再进行MD5,然后下载文件的时候通过保存在数据库里的文件ID读取文件路径,一样也实现了文件下载,这样我们就无法直接得到我们上传的webshell文件路径 ...

  7. P2120 [ZJOI2007]仓库建设（dp+斜率优化）

    思路 首先暴力DP显然,可以得20分 加上一个前缀和优化,可以得到40分 然后上斜率优化 设\(sum_i\)为\(\sum_{1}^iP_i\),\(sump_i\)为\(\sum_{1}^{i}P ...

  8. 《操作系统_FCFS和SJF》

    先来先服务FCFS和短作业优先SJF进程调度 转自:https://blog.csdn.net/qq_34374664/article/details/73231072 一.概念介绍和案例解析 FCF ...

  9. Bytom交易说明（UTXO用户自己管理模式）

    比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 该部分主 ...

  10. 【.Net】结合项目谈谈多线程

    提到多线程, 大家都知道, 在进程中启用多个线程进行工作, 会提升程序的效率等等. 本篇文章旨在解释多线程的基础概念之外, 还要结合实际的项目来谈多线程的具体使用. Thread 我们知道启动一个线程 ...