h5监听物理返回键

浏览器 或 一些 h5 容器(比如 webview 或 uniwebview),由于处在沙盒环境,无法监听原生的物理返回键,需要借助客户端实现这一行为。

以主流前端框架的 hash 路由模式为例,物理返回键会触发默认的 hashchange ,导致无法阻止当前页面跳转。

由于 hashchange 不会触发页面刷新,因此通过相同的 hash 形成不同的记录,在两者间跳转,可以巧妙地捕捉到 物理返回键 的行为,因此可以先 push 相同hash页面1 入栈,再 push 相同hash页面2 入栈。

一方面,为了避免这种解决方案可能造成的额外困扰,我们可以事先记录 需要捕捉返回键页面 的跳转前页面,一般可以存到 model 里面,这样两个相同的 hash 页面都可以实现和原来只有一个 hash 页面时相同的行为;

另一方面,为了区分 相同hash页面1 和 相同hash页面2,可以在同一页面内监听 hashchange 事件,通过 event.oldURL 来区分 相同hash页面1 和 相同hash页面2。

两个相同的 hash 页面可以通过 query 参数来对浏览器形成差异,每次显示的都是 相同hash页面2,但是 物理返回键 将在 相同hash页面1 停留,以模拟监听到物理返回键的行为。

posted on 2020-09-16 17:50  Lowki  阅读(2093)  评论(0编辑  收藏  举报