頁面連結跳轉曆史URL不記錄的相容處理

標籤：zhang   參數   技術   bsp   zha   turn   切換   而不是   連結   

一、跳轉曆史URL不記錄需求的由來

 

比方說我們點擊首頁的“分類”進入分類頁，如：

然後分類頁頭部有個“男生”“女生”的頻道切換：

這兩個都是直接的連結，如果就會帶來這麼一個問題，如果使用者在“男生”“女生”的頻道之間反覆切換，則當我們點擊左上方的返回按鈕（如）的時候，就會發現點擊很多次還是在“分類頁”上（僅僅頻道不一樣），這其實是不符合使用者預期的。

正常的使用者預期應該是點擊左上方的返回按鈕應該直接回到首頁，而不是還在當前頁過家家。也就是，雖然技術層面使用者剛才的上一頁就是“男生”或是“女生”頻道頁面，但是，我們展現給使用者的互動必須是首頁。

頁面連結跳轉曆史URL不記錄的相容處理

如下fnUrlReplace方法：var fnUrlReplace = function (eleLink) {    if (!eleLink) {        return;    }    var href = eleLink.href;    if (href && /^#|javasc/.test(href) === false) {        if (history.replaceState) {            history.replaceState(null, document.title, href.split(‘#‘)[0] + ‘#‘);            location.replace(‘‘);        } else {             location.replace(href);        }    }};

其中eleLink參數表示<a>連結DOM元素，理論上，fnUrlReplace()方法相容到IE6。
要想實現最終的效果，還需要和事件關聯。舉個簡單的例子，假設頁面上有個<a>連結，希望點擊的時候不進入記錄堆棧，則可以這樣：

document.getElementsByTagName(‘a‘)[0].onclick = function (event) {    if (event && event.preventDefault) {        event.preventDefault();    }    fnUrlReplace(this);    return false;};

 

頁面連結跳轉曆史URL不記錄的相容處理