一、跳轉歷史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不記錄的兼容處理