js不记录某个url链接历史并且不让微信出现底部的返回菜单
在微信中,当我从链接a跳转到b的时候,会发现在底部会出现一个小横条,究其原因就是因为浏览器有了浏览记录。那么,我们要取消掉这个记录,盖怎么办呢?
(function(){
var fnUrlReplace = function (eleLink) {
if (!eleLink) {
return;
}
var href = eleLink.href;
if (href && /^#|javasc/.test(href) === false) {
if (history.replaceState) {
// 生成新的URL
history.replaceState(null, document.title, href.split('#')[0] + '#');
location.replace(''); // 刷新当前页面URL
} else {
location.replace(href); // 不生成新的历史记录
}
}
};
document.getElementsByTagName('a')[0].onclick = function (event) {
// 阻止跳转
if (event && event.preventDefault) {
event.preventDefault();
}
fnUrlReplace(this);
return false;
};
}());
在实际工作中,我们会遇到一个页面中有几个tab切换标签,tab切换是修改了浏览器地址”,tab切换是默认记录到历史的。因此我们点击返回按钮的时候,不停的在几个tab中切换,但是,实际我们是想返回到上一页的,不是在几个tab中切换。那么这种情况如何解决呢?
如果直接不记录要跳转的url:
/**
* 不记录该url历史记录
* @param url
*/
var fnUrlReplace = function (url) {
if (!url) {
return;
}
if (history.replaceState) {
history.replaceState(null, document.title, url);
location.replace('');
} else {
location.replace(url); // 在微信上使用这个方法也会有底部的bar
}
};
应用:
$('.switch').on('change', function () {
let _this = $(this);
let url = 'http://xxx.xxx.xxx?xxx';
fnUrlReplace(url);
window.location.href = url;
});