这个功能可以进行传参,还可以解决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>

其次是

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

还记得上面的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. The POM for XXX is invalid, transitive dependencies (if any) will not be available解决方案

    今天,某个开发的环境在编译的时候提示警告The POM for XXX is invalid, transitive dependencies (if any) will not be availab ...

  2. Huffman Implementation with Python

    Huffman Implementation with Python 码表 Token Frequency a 10 e 15 i 12 s 3 t 4 space 13 n 1 生成 Huffman ...

  3. RadioButton在数据列表中实现单选功能

    在服务器端动态生成的name总是不断变化,故需手动实现单选 ; <html xmlns="http://www.w3.org/1999/xhtml"> <head ...

  4. 【python001-IDLE】

    一.python的下载地址:http://www.python.org 二. python的注释:# 三.>>> print("i love python")i ...

  5. upc组队赛1 黑暗意志【stl-map】

    黑暗意志 题目描述 在数千年前潘达利亚从卡利姆多分离之时,迷雾笼罩着这块新形成的大陆,使它不被外来者发现.迷雾同样遮蔽着这片大陆古老邪恶的要塞--雷神的雷电王座.在雷神统治时期,他的要塞就是雷电之王力 ...

  6. C语言变量的作用域和存储类型

    1.动态局部变量:也称局部变量.自动变量,是指在函数内部定义的自动变量,不带static修饰,作用域是定义该变量的子程序.在退出函数后,变量自带内存会自动释放. 2.静态局部变量:是指在函数内部定义的 ...

  7. ASP.NET Core2.1 中如何使用 Cookie和Session

    https://blog.csdn.net/canduecho/article/details/80651853 ASP.NET Core2.1的官方项目模板在创建的Razor Pages和MVC项目 ...

  8. 题解——POJ 2234 Matches Game

    这道题也是一个博弈论 根据一个性质 对于\( Nim \)游戏,即双方可以任取石子的游戏,\( SG(x) = x \) 所以直接读入后异或起来输出就好了 代码 #include <cstdio ...

  9. (zhuan) Building Convolutional Neural Networks with Tensorflow

    Ahmet Taspinar Home About Contact Building Convolutional Neural Networks with Tensorflow Posted on a ...

  10. 常用处理数组、字符串API → forEach every some sort map filter slice split indexOf concat substring substr splice join toString replace

    Object与Array的语法糖 var arr = [1,2,3]; // [] 是 new Array(1,2,3) 的语法糖(简写) var obj = {'name':2,'age':3}; ...