页面链接跳转历史URL不记录的兼容处理

Posted 2020-10-01 欧辰0312

一、跳转历史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;
};