history.pushState的實際使用筆記

 history.pushState是HTML5的特殊，IE8+支援

意思是在不重新整理瀏覽器的情況下給瀏覽器記錄插入佇列的意思.

“插菊花“

參考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState

history.pushState(state, title, url);

state：這個屬性沒用過，這裡不講它

title：幾乎沒有瀏覽器支援

url：重點！！包含不同的值，能帶來不一樣的“插菊花”style

下面詳細解說各種style，come on，baby！！！~~.~~~

1.包含“#”，修改HASH，javascript的application program interface對應的是location.hash

2.包含“?”,修改的是search，javascript的application program interface對應的是location.search

3.包含“?&”,如果你用的是2的方案同時原本的location.search就已存在了，你的search會被“插菊花”幹掉，如果一開始你連結是沒有考慮search的，後期你可能會被老闆懟死，好多第三方來源的統計沒了，

例如：

你的連結是:192.168.0.209:998/index.html?a=a&b=b

你的js程式碼是：

或者是你聰明的你很快想出來的醬紫來解決以上問題：

程式碼②

但，很快就能發現：

http://192.168.0.209:998/index.html?a=a&b=b?&bb=9?&bb=9?&bb=9?&bb=9?&bb=9?&bb=7?&bb=9?&bb=9?&bb=9?&bb=9?&bb=9?&bb=9?&bb=9?&bb=9（省略1000.....次）

你的使用者訪問的地址進入出現了N次這種情況。

可是，可是，你的程式碼沒問題呀。

問題在於，你沒有重新整理，試一下重新整理1次？2次？N次

你發現你的插菊花真的是在double插（新增瀏覽器歷史記錄（插）的同時給原來的瀏覽器地址字串追加內容（插）），啊哦，酸爽吧

其實把“&”這個東西理解了，其實能理解為什麼這裡會是這樣處理，“並，同時，共存”

4.“不包含[#，或者？或者&，或者三者混搭的]純字串”，例如:

你的原連結是:http://192.168.0.209:998/dir/index.html

效果:http://192.168.0.209:998/咯咯噠咯咯噠9
連結看起來也很美觀

但！！

重新整理下後

404

這裡修改的是path，javascript的application program interface對應的是location.patchname,他會把檔案目錄以及檔名幹掉，所有瀏覽器找不到資源路徑

解決方法：

1.後端指定檔案輸出

2.dir不要和伺服器資料夾關聯

被噴：！！！！！！

xx1：你一個靜態頁面為什麼要我改，憑什麼

xxx2:不是吧，改個頁面要改架構

xx3：就改個頁面有這麼麻煩麼

好吧，這個真的不實在。

5.禁止回退，6吧，(✪ω✪)

 history.pushState(null, null, location.href);
                window.addEventListener("popstate", e => {
                        history.pushState(null, null, location.href);
                });

本文章到這裡暫時結束，更多內容請關注上一篇（監聽瀏覽器hash變化和html5 pullstate特性）