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. vue内置的标签（组件）

    component:用于动态组件,查看博文vue学习之组件. <component :is="componentId"></component> trans ...

  2. Debian 无线网络切换问题解决方案

    sudo gedit /etc/NetworkManager/NetworkManager.conf 2: 添加 [device] wifi.scan-rand-mac-address=no 3:重启 ...

  3. 机器学习基石8-Noise and Error

    注: 文章中所有的图片均来自台湾大学林轩田<机器学习基石>课程. 笔记原作者:红色石头 微信公众号:AI有道 上一节课,我们主要介绍了VC Dimension的概念.如果Hypothese ...

  4. JAVA学习笔记（2）—— java初始化三个原则

    1. 初始化原则 (1)   静态对象(变量)优先于非静态对象(变量)初始化,其中静态对象(变量)初始化一次,非静态对象(变量)可能会初始化多次. (2)   父类优先于子类初始化 (3)   按照成 ...

  5. 【转】一文掌握 Linux 性能分析之网络篇（续）

    [转]一文掌握 Linux 性能分析之网络篇(续) 在上篇网络篇中,我们已经介绍了几个 Linux 网络方向的性能分析工具,本文再补充几个.总结下来,余下的工具包括但不限于以下几个: sar:统计信息 ...

  6. vue面试题总结

    1.vue双向绑定的实现原理2.js的继承和原型链3.es6语法箭头函数和普通函数的区别 普通函数的this总是指向它的直接调用者. 在严格模式下,没找到直接调用者,则函数中的this是undefin ...

  7. 各种手工DIY

    http://www.guokr.com/scientific/subject/diy/ 高仿宜家莲花灯 http://www.guokr.com/article/179863/ 做一只会发光的魔幻吊 ...

  8. Elastichsearch实践——基本使用

    官网文档:https://www.elastic.co/guide/cn/elasticsearch/guide/current/getting-started.html es中的索引.类型.文档可以 ...

  9. div上下左右居中

    链接.father { width: 300px; height:150px; position: relative; } .son { position: absolute; top: 0; rig ...

  10. jdk1.7更新visualvm插件

    所有的插件全部更新到hithub上 https://visualvm.github.io/pluginscenters.html 然后,在根据不同的JDK版本选择不同的插件地址.更改VisualVM插 ...