js 点击浏览器返回跳指定页面

发表于 | 分类于

非常突然的接到老板的“奇思妙想”，想让用户点击浏览器返回时跳转指定页面（我们的另一个活动页），在另一个页面中再跳会第一个页面，如此往复，跳来跳去和狗皮膏药一样。

我的第一想法就是是否有监听用户点击浏览器返回按钮的事件呢，结果发现是有的=》beforeunload,问题解决了？实际没有:

  • chrome浏览器里回调函数完全没有被执行
  • 火狐 同样没用
  • 360兼容模式（ie9） 完全没用

百度后发现另一个函数：visibilitychange 监听浏览器视图变化,但这个是监听页面变化的，比如切换其他页面时会触发，

  • chrome 会卡住页面，最小化浏览器还会自动弹出
  • 火狐 会执行函数，但不会卡主页面
  • 360兼容模式（ie9） 完全没用

最后解决办法

使用popstate事件监听，当历史记录条目更改时触发，注意历史条目数据包含激活状态，比如点击回退按钮时，历史条目由未激活转变到激活状态popstate事件也会被触发，但history.pushState()和hidstory.replaceState()不会触发事件。

1
2
3
4
5
6
7
8
9
10
11
12
pushHistory(); 
window.addEventListener("popstate", function (e) { 
    pushHistory(); 
}, false); 

function pushHistory() {
    var state = {
        title: "title",
        url: "#"
    };
    window.history.pushState(state, "title", "#");
}

首先将井号写入历史，井号就是本页面，每次点击返回按钮时再次写入，让井号的后面还是井号，用户怎么点返回按钮返回的都是本页面，这一剂狗皮膏药就算成了，实际测试，安卓，ios浏览器都是可用的。

如果还嫌不够恶心，可以用上面监听页面变化事件监听页面隐藏，然后alert弹框，在chrome里就只能关闭浏览器才能出页面了。