h5新增的一个特性即在history对象上 新增了pushState 和 replaceState 接口 配合在window对象上新增的popState事件使用
为什么要用它：因为通过historyapi可以实现 url跳转的时候不刷新当前页面，因此 可以用来制作单页应用（SPA）
 
下面是个小例子：
 
 
切换到历史记录里查看，调用pushstate的时候插入了新的记录：

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>History Api 使用演示</title>

 </head>

 <body>

   <div class="wrapper">

     <ul class="nav">

       <li class="nav-item">

         first

       </li>

       <li class="nav-item">

         second

       </li>

       <li class="nav-item">

         third

       </li>

     </ul>

     <div class="content"></div>

   </div>

   <script>

     var menu = document.querySelectorAll('ul.nav>li');

     var content = document.querySelector('div.content');

     function initPage (page) {

       menu.forEach(function(i,k){

         i.classList.remove('selected-item');

       });

       menu.forEach(function(i,k){

         if (i.innerText.toLowerCase().trim() === page) {

           i.classList.add('selected-item');

         }

       });

       content.innerText = `this is ${page.substring(1)} page`;

     }

     initPage(window.location.hash);

     menu.forEach(function(i,k){

       i.addEventListener('click', function(e) {

         var page = e.target.innerText.toLowerCase().trim();

         initPage(page);

         // pushstate 会修改地址栏url并向历史记录添加一条记录，不会刷新页面！

         window.location.hash = page;

         history.pushState(null, page, window.location.hash);

       });

     });

     /*

       go back forward都会触发popstate，这个方法会修改地址栏，不刷新页面！

     */

     window.addEventListener("popstate", function(e) {

       initPage(window.location.hash);

     });

     /*

       锚点的改变会触发hashchange事件，如果用锚点区分url可以监听此事件

     */

     window.addEventListener('hashchange', function(e){

       var hash = window.location.hash;

       console.log(`hash changed to ${hash}!`);

     });

   </script>

 </body>

 </html>

History Api使用演示的更多相关文章

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

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

  2. History API与浏览器历史堆栈管理

    移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有--针对不支持o ...

  3. HTML5学习笔记之History API

    这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美 ...

  4. 使用HTML5的History API

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

  5. 利用HTML5的History API实现无刷新跳转页面初探

    HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...

  6. 大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  7. 大熊君学习html5系列之------History API（SPA单页应用的必备）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

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

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

  9. html5 history api

    1.html5 history api适用场景,个人理解最大的用处是配合ajax使用,使ajax拥有回退.前进的用户体验. 2.代码(dive into html5中的一个小例子) 1)fer.htm ...

随机推荐

  1. 97w网站邀请码

    我是一个老粉丝了. 如果想要97w网站邀请码可以留下联系方式,给我发过去哦. 最好是邮箱. http://www.97w.net/tag.html

  2. java 注意事项---避免踩坑

    1.......对象参数接收不能大写

  3. JWT使用

    原文链接:http://www.bleachlei.site/blog/2017/06/09/Nodejs-Expressjs-JWT%EF%BC%8CJWT%E4%BD%BF%E7%94%A8/ J ...

  4. apache无法启动报错No space left on device

    apache无法启动报错No space left on device 故障现象:apache无法启动ipcs信号量很多 # service httpd startStarting httpd : [ ...

  5. php中trait的使用

    1.php中的trait是啥? 看上去既像类又像接口,其实都不是,Trait可以看做类的部分实现,可以混入一个或多个现有的PHP类中,其作用有两个:表明类可以做什么:提供模块化实现.Trait是一种代 ...

  6. 【java】Java组件概览（2）— 基本库

    1.Math Math相关的库包括包括浮点库(java.lang.Math和java.lang.StrictMath)和任意精度数学(java.math包). (1)java.lang.Math 该类 ...

  7. jenkins+git（完全萌新的一篇，求指点）

    自己不熟悉所以打算写一份新手的自我理解,有错误欢迎大家指出 公司使用jenkins和git对代码进行管理 首先我们将代码放在git上,然后通过一些方法(我还不知道啥方法) 将git的代码放在jenki ...

  8. 一丶Http协议

    一 HTTP概述 HTTP(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则. HTTP就是一个通信规则,通信规则 ...

  9. C语言博客作业2--循环结构

    1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 对本章学习感觉相对前面的难度有较大提升,而且刚开始对嵌套循环比较陌生,像龟兔赛跑和输出菱形都是用了较长时间才完成,所以我认 ...

  10. eclipse导入本地的svn项目后不能在team提交更新

    由于项目是在本地有svn检出,然后再想通过eclipse 修改然后在eclipse内部提交和更新,但是此时,team里并没有update和commit选项, 又不想重新再检出一次项目,怎么办? 可以在 ...