zoukankan      html  css  js  c++  java
  • history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)

     
     

    简介

     
    HTML4有一些对浏览历史的前进后退API的支持如:
     
    window.history.back();
    window.history.forward();
    window.history.go(-1);
    window.history.go(1);
     
    HTML5浏览器新添加了不刷新改变网址地址的API:
     
    var currentState = history.state;
    var stateObj = { foo: "bar" };
    window.history.pushState(stateObj, "page 2", "bar.html");
     
    这些API构建单页面无刷新网站是十分有帮助的,很可惜他们在老浏览器中无法使用。history.js可以解决这个问题。
     
     
    History.js优雅地支持所有浏览器的History/State的 API(pushState,replaceState,onPopState)。包括数据,title,replaceState。支持 jQuery,MooTools和Prototype。在HTML5浏览器,它使用原生API,可以直接修改URL,而无需再使用哈希值。对于HTML4 浏览器则使用Hash值进行兼容。


    代码示例

    (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);
    
    

    效果

     
     
    当在HTML5浏览器中时地址栏的变化
     
    www.mysite.com
    www.mysite.com/?state=1
    www.mysite.com/?state=2
    www.mysite.com/?state=3
    www.mysite.com/?state=4
    www.mysite.com/?state=3
    www.mysite.com/?state=1
    www.mysite.com
    www.mysite.com/?state=3
     
    当在HTML4浏览器中时地址栏的变化
     
    www.mysite.com
    www.mysite.com/#?state=1&_suid=1
    www.mysite.com/#?state=2&_suid=2
    www.mysite.com/#?state=3&_suid=3
    www.mysite.com/#?state=4
    www.mysite.com/#?state=3&_suid=3
    www.mysite.com/#?state=1&_suid=1
    www.mysite.com
    www.mysite.com/#?state=3&_suid=3
     
     
  • 相关阅读:
    [译] 我最终是怎么玩转了 Vue 的作用域插槽
    通俗易懂的Git使用入门教程
    JS取出两个数组的不同或相同元素
    jQuery中四种事件监听的区别
    vuex里mapState,mapGetters使用详解
    php 获取时间今天明天昨天时间戳
    Linux crontab定时执行任务
    php返回json数据函数实例_php技巧_脚本之家
    mysql查看表结构命令
    Mysql命令大全
  • 原文地址:https://www.cnblogs.com/goodbeypeterpan/p/4421955.html
Copyright © 2011-2022 走看看