首页 > 代码库 > 页面链接跳转历史URL不记录的兼容处理
页面链接跳转历史URL不记录的兼容处理
一、跳转历史URL不记录需求的由来
比方说我们点击首页的“分类”进入分类页，如下图：
然后分类页头部有个“男生”“女生”的频道切换：
这两个都是直接的链接，如果就会带来这么一个问题，如果用户在“男生”“女生”的频道之间反复切换，则当我们点击左上角的返回按钮（如下图）的时候，就会发现点击很多次还是在“分类页”上（仅仅频道不一样），这其实是不符合用户预期的。
正常的用户预期应该是点击左上角的返回按钮应该直接回到首页，而不是还在当前页过家家。也就是，虽然技术层面用户刚才的上一页就是“男生”或是“女生”频道页面，但是，我们展现给用户的交互必须是首页。
页面链接跳转历史URL不记录的兼容处理
如下fnUrlReplace方法：var fnUrlReplace = function (eleLink) { if (!eleLink) { return; } var href =http://www.mamicode.com/ 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;};
页面链接跳转历史URL不记录的兼容处理
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。