设置hash后导致的返回问题的解决方案
引: 通常,在写移动端页面的时候,如果遇上很多需要切换的tab,比如切换城市/类目等,都会发起一次异步的请求,请求数据加载出来后,当点击某个具体的产品后,页面将会跳转到一个新的地方,我们希望用户在浏览完这个产品之后,可以返回到原来的地方,而返回的地方是上一次用户选择的条件的页面---这时候,hash就排上用场了。
设置hash:
设置hash的方法很简单。通过window.location.hash可以获取到url上的hash值,也可以通过赋值动态地给hash赋值,代码可以如下
var hash = window.location.hash.slice(1);
由于通过window.location.hash获取到的hash是"#xxx"的格式,所以要获取hash的具体值可以通过字符截取,通过slice可以实现。
ps:hash值的设置有以下几种集中方式,如果hash是number型,可以不需要带#,如果设置字符串,也可以不加#,但是如果加上#就一定要按照字符串来设置。如以下几种都是正确的设置hash的方式
window.location.hash = 1111; //number型 window.location.hash = "1111"; //string型,不加# window.location.hash = "#1111" ;//string型,加#
存在的问题:
当你在一个页面中无刷新的情况下,通过脚本(js)频繁地设置了hash值,你会发现,返回的时候,返回到你设置的上一次hash的地址,但是页面并没有刷新,这时候,你会发现这并不是你想要的(这种恶心的结果在你设置了很多次hash的情况下尤为恶心),你可能想回到的是从某个地方跳转过来的地方。这时候,可以通过document.location.replace强行把hash历史去掉,实现想要的功能。
getFilterUrl: function(hash) { return document.location.protocol + '//' + document.location.host + document.location.pathname + document.location.search + '#' + hash; }
然后,使用的时候可以这样:
var hash = "xxxx"; //这个hash自己通过具体的需求设置 document.location.replace(this.getFilterUrl(hash));
如此这般,就可以解决页面返回的业务需求。