h5 - 在微信中跳转不出来的办法 捂脸

访问量: 241

这个事儿的原理是: 

1. 出发页面(必须带有# ) 

2. 目标页面 (可以不带# )

使用场景: 用户 位于 “出发页面”, 点击手机的返回键, 然后页面就会:

1. 触发 onhashchange 方法 (前提已经说了: 出发页面URL 中包含# , 所以跳转的时候会触发)

2. 触发跳转方法 location.href=...

3. 0.2 秒之后, 为当前方法增加一个  时间戳  #1234 (也就是说,该页面URL 中也包含了#)

window.onhashchange=function(){
  console.info("== onhashchange..")
  jp();
};
function hh() {
  var new_url = location.href.split('#')[0] + "#" + new Date().getTime()
  history.pushState(history.length+1, "message", new_url);
}
function jp() {
  location.href="http://target.com/some_url.php";
}
setTimeout('hh();', 200);

需要注意的一点是: 对于SPA 项目, # 会有变化, 上面的方法是不变的。 就是需要修改hh() 方法, 让它从 /#/23414 成为 /#/show_page?t=23414  这样的参数。 否则会引起SPA 页面打不开(一片白)的情况。

订阅/RSS Feed

Subscribe

分类/category