走位！移动端模拟返回拦截的实现方案

2023-10-15 23:30:29

移动端作为互联网的重要入口，切图仔前端工程师开发移动端页面早已是司空见惯的事了，并且其中大部分都是内嵌于客户端（app，小程序）的h5页面，即webview。

移动端页面无法直接调用设备物理返回按钮事件，也意味着无法直接调用window对象的onhashchange、onpopstate事件处理程序，为了实现返回拦截功能，需要使用javascript代码模拟返回事件，本文提供一种移动端模拟返回拦截的实现方案。

1. 实现原理

移动端物理返回按钮事件本质上是触发window.history.back()，当我们点击物理返回按钮时，浏览器会自动执行window.history.back()方法，从而实现返回上一页的功能。因此，我们可以通过javascript代码模拟触发window.history.back()方法，从而实现返回拦截功能。

2. 代码实现

2.1 准备工作

function back(){
    //模拟物理返回键后退
    history.back();
}

2.2 绑定事件

//监听页面加载完成事件
window.addEventListener('load',function(){
    //绑定页面返回事件
    document.addEventListener('backbutton',back,false);
});

2.3 兼容性处理

为了兼容不同浏览器的返回事件，需要对不同浏览器的返回事件进行兼容处理。

if('onpageshow' in window && 'performance' in window){
    window.addEventListener('pageshow',function(event){
        if(event.persisted){
            //从后退或前进缓存中加载页面
            window.location.reload();
        }
    });
}