长沙网站建设开发/深圳网站优化推广方案

文章参考自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;
};