window.history,页面中的返回按钮
一、页面中的返回按钮事件
window.history可以不加window这个前缀
他的方法有:
window.history.go(-1); //-n表示后退n页,n表示前进n页,或者是一个url window.history.back(); //同样表示后退一页 window.history.forward(); //表示前进
如果页面是从一个微信上的链接跳过去的,或者直接在浏览器输入地址进去的,此时回不到上一页,我们可以用 document.referrer 来判断有没有上一页,如果没有可以强制他进入某一个页面
if (document.referrer === '') { // 没有来源页面信息的时候,改成首页URL地址 $('.jsBack').attr('href', '/'); }
二、链接跳转历史URL不记录
从a页面进入到test3此页面,test3页面跳到test4页面,test4页面跳到test3页面,test4、test3页面循环,此时使用history.back()就会循环返回test4,test3,
如果有一个需求是我点击返回直接返回到a页面,不进行循环,这时我们可以使用页面链接跳转历史URL不记录,test3跳到test4,test4跳到test3这个跳转历史不记录,于是使用history.back()或者点击返回就能直接返回a页面
方法如下:
//页面链接跳转历史URL不记录 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); //最终结果是用了这个进行跳转 } } }; //这个链接就是不需要进行记录跳转的链接 document.getElementsByTagName('a')[0].onclick = function (event) { if (event && event.preventDefault) { event.preventDefault(); } fnUrlReplace(this); return false; };
上面的代码中,a连接的跳转使用了 location.replace(href);
该方法是将地址替换成新url,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,
因此当使用replace方法之后,你不能通过“前进”和“后 退”来访问已经被替换的URL,这个特点对于做一些过渡页面非常有用!