錨接口(下)——html5的history api

時間 2019-11-30

標籤接口 html5 html history api 欄目 HTML5 简体版

原文原文鏈接

概述

雖然html5的history api是H5專門用來解決記錄歷史記錄和單頁面的方法，可是不少老式的瀏覽器並不支持它，因此通常遇到老式的瀏覽器會作一個polyfill使用以前的hashchange方法。javascript

另外一方面，html5的history api在實際使用的時候會和以前的hashchange方法的用法有稍微的不一樣。css

說明

主要使用history.pushState改變url，它的調用格式是history.pushState(data, title, path);，其中data是一個本身定義的數據對象，title是標題，如今大部分瀏覽器還不支持，path是路徑。
用這個方法改變url的時候，頁面並不刷新。
用這個方法改變url的時候，並不會觸發onpopstate事件，只有在使用history.go或者history.back等方法的時候纔會觸發onpopstate事件，好比說瀏覽器按倒退鍵。(這一點和hashchange方法不一樣)
觸發onpopstate事件的時候能夠用event.state得到data這個對象。

解決方案

SPA怎麼路由

具體和hashchange方法相似，惟一不一樣的地方是，在用history.pushState改變url的時候，因爲不會觸發onpopstate事件，因此一些函數要放在history.pushState改變url以後處理(之前是直接由hashchange事件處理)。html

複製url並在另外一個頁面打開

若是是用#符號的話，那麼方法相似hashchange。html5

可是新的history api能夠摒棄#字符，好比說react-router裏面就是這麼作的，具體怎麼解決我尚未弄清楚。java

例子

下面是我編寫的一段測試代碼供你們參考。直接複製並存爲html文件，而後在服務器上打開便可。(由於history api須要一個域名，能夠是locahost)react

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript">
    //hashchange事件，若是有hash值，則輸出到oDiv。
    function onPopstate(event) {
      if(history.state) {
        console.log(history.state.next);
      }
      if(history.state && history.state.next === 1){
          $('#div1').hide();
          $('#div2').show();
          $('#div3').hide();
        } else if(history.state && history.state.next === 2) {
          $('#div1').hide();
          $('#div2').hide();
          $('#div3').show();
        } else {
          $('#div1').show();
          $('#div2').hide();
          $('#div3').hide();
        }
    }
    //頁面加載
    window.onload=function (){
        //加載時觸發一次hashchange事件
        $(window)
            .bind( 'popstate', onPopstate )
            .trigger( 'popstate' );
        //點擊事件，把數組裝在hash裏面
        document.getElementById("input1").onclick=function(){
            history.pushState({next: 1}, null, 'next1.html');
            $('#div1').hide();
            $('#div2').show();
            $('#div3').hide();
        };
        document.getElementById("input2").onclick=function(){
            history.pushState({next: 2}, null, 'next2.html');
            $('#div1').hide();
            $('#div2').hide();
            $('#div3').show();
        };
        document.getElementById("input3").onclick=function(){
            history.pushState('', null, 'index.html');
            $('#div1').show();
            $('#div2').hide();
            $('#div3').hide();
        };
    }
    </script>
</head>
<body>
    主頁=模塊1，模塊2頁=模塊2，模塊3頁=模塊3
    <input type="button" value="去模塊2頁" id="input1" />
    <input type="button" value="去模塊3頁" id="input2" />
    <input type="button" value="去主頁" id="input3" />
    <div id="div1">模塊111111111111111111</div>
    <div id="div2">模塊222222222222222222</div>
    <div id="div3">模塊333333333333333333</div>
</body>
</html>

其它

單頁面路由實際上和個人demo不同，不太運用history.pushState裏面的data參數，而是直接分析url作正則匹配，不過這個data參數在別的地方有很大用處。
通常的路由和個人demo裏面不同，不是用按鈕而是用a連接，那個時候直接在click的時候阻止默認跳轉便可。
history.pushState裏面的data參數儲存在sessionStorage裏面。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。