zoukankan      html  css  js  c++  java
  • 关于history.js的使用

         项目地址: https://github.com/browserstate/history.js

         做wap端的时候,有些时候一个页面里有很多小页面或者标签,希望刷新浏览器或者按返回键的时候,能够被当成一个页面去处理。所以就去找html5是否提供这样的接口。

    最后发现确实有这个接口,但兼容性 不好。

          后来发现这个插件 history.js,可以兼容各大浏览器。 html4是使用Hash值进行兼容。所以在获取url 问好后面的值时,需要判断是否是兼容模式。

          js中如果是hash兼容模式 window.location.hash 这个值是不为空,如果不是hash兼容模式 window.location.hash值为空。

    history.js 提供的demo也很简单

    (function(window,undefined){
      // Bind to StateChange Event
      History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
      });
      // Change our States
      History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
      History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
      History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
      History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
      History.back(); // logs {state:3}, "State 3", "?state=3"
      History.back(); // logs {state:1}, "State 1", "?state=1"
      History.back(); // logs {}, "Home Page", "?"
      History.go(2); // logs {state:3}, "State 3", "?state=3"
    })(window);
    

      初次看,压根没看懂是如何使用的。。。。

          经过实践,特来解释下上边的代码

    //History主要改变的问号后面的键值。。
    //这个是向浏览历史压入一条新纪录
    //记录为当前url且问号后面的值为 state=1,
    //将一个{state:1}对象压入该链接中,供下面的历史事件触发时调用,
    //State 1 为其新的标题 (即head title);
    //这个动作会触发下面statechange 事件
    History.pushState({state:1}, "State 1", "?state=1");
    
    //改变当前url问好后面的值
    //不触发statechange事件
    //不增加历史记录 History.replaceState({state:3}, "State 3", "?state=3"); //前提是通过History.pushState 增加的历史记录。 // 向前跳或者向后跳都会出发这个事件,刷新不会 //State对象中的data就是 上面存入的对象 {state:3} History.Adapter.bind(window,'statechange',function(){ var State = History.getState(); instead of event.state });

    所以无论是将一条url压入历史中、返回上一页、向前跳一页等等(不包括刷新和原来的历史记录),都会触发statechange事件。 剩下的自己发挥。

    原先我不知道压入的时候会触发,后面调试的时候才发现,也会。 这是个坑。。。

  • 相关阅读:
    14-定时器
    13-JS中的面向对象
    12-关于DOM操作的相关案例
    11-DOM介绍
    10-关于DOM的事件操作
    09-伪数组 arguments
    08-函数
    07-常用内置对象
    06-流程控制
    05-数据类型转换
  • 原文地址:https://www.cnblogs.com/songbyjson/p/4886615.html
Copyright © 2011-2022 走看看