JS获取上一访问页面URL地址——（下）

文章参考自http://www.zhangxinxu.com/wordpress/?p=5957

问题的由来

上篇有提到过document.referrer，在实际中我们会遇到tab切换的问题，如果两个tab使用的是同一个页面的不同路由，当我们按返回键的时候，我们期望的是回到上一页，而不是呆在当前页。

location.replace()方法

可以阻止按钮的默认跳转，然后使用location.replace()替换当前按钮地址。代码如下：

$('#demo').on('click', function (event) {
    event.preventDefault();
    location.replace(this.href);
})

history.replaceState()和location.replace()方法双管齐下

$('#demo').on('click', function (event) {
    event.preventDefault();
    history.replaceState(null, document.title, this.href.split('#')[0] + '#');
    location.replace('');
})

1、首先通过HTML5 history.replaceState()方法把当前URL地址替换成以个井号#结尾的目前链接地址；
2、执行location.replace(”)刷新当前地址（此时#会忽略）；

但是这个方法是不适用于ios的谷歌浏览器。

兼容问题

上面双管齐下方法只是解决了移动端项目的这个需求，history.replaceState从IE10才开始支持，如果是PC端项目如果也有类似需求，则上面的代码就不适用，于是，我们有必要整一份所有浏览器都兼容的页面链接跳转历史URL不记录的JS代码片段。
如下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;
};