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;};