js不记录页面跳转历史的解决方法

2017-4-19 hanbin JavaScript

在实际工作中，我们会遇到一个页面中有几个tab切换标签，tab切换是修改了浏览器地址”，tab切换是默认记录到历史的。因此我们点击返回按钮的时候，不停的在几个tab中切换，但是，实际我们是想返回到上一页的，不是在几个tab中切换。那么这种情况如何解决呢？

首先想到了

1.location.replace(newURL);

replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。

代码这样写

<ul id="title"> <li><a href="www.guoxue365.cn/Home/subject/showHistory">标签一</a></li> <li><a href="www.guoxue365.cn/Home/subject/showClass">标签二</a></li> </ul> $('#title li a').on('click', function (event) { //tab中a标签点击 event.preventDefault(); location.replace(this.href); })

上面的代码在有些手机不起作用，所以失败。

2.history.replaceState()和location.replace();

解决方法如下：

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

replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。

通过这个方案，我们再怎么切换tab，点击返回之后，照常返回到进入页面的前一页。不会再在tab中切换了！

因为history.replaceState从IE10才开始支持，假如要兼容更早的浏览器，或者在PC端使用。看到网上封装了一个函数，这里我借用一下：

上面的函数可以这样引用

$('#title li a').on('click', function (event) { if (event && event.preventDefault) { event.preventDefault(); } fnUrlReplace(this); return false; })

分享到： QQ空间新浪微博腾讯微博微信更多

标签: javascript

« Thinkphp自定分页方法 | 通过js给网页加水印»

js不记录页面跳转历史的解决方法

日历

存档

最新评论

链接

搜索