uni-app H5的返回拦截

需求:用户试图关闭或者返回的时候拦截,并弹出提示框。

uni-app的onBackPress只能拦截左上角的返回,物理按键和左滑返回拦截不了,采用popState的方式。

methods:{
    showBack(){
        //检测到返回再插一条
        window.history.pushState(null, null, document.URL);
         //拦截逻辑
    }
},
mounted(){
     //页面加载后先插一条记录
     window.history.pushState(null, null, document.URL);
     window.addEventListener("popstate", this.showBack(), false);
},
//销毁监听事件,不然会影响其他页面
destroyed() {
    window.removeEventListener("popstate", this.showBack, false);
},

注意事项:
1.其他页面的返回事件,要改为 history.back() ,不能是 uni.navigateBack()。
2.部分浏览器,如果用户进入页面啥也不干就返回,是监听不到的,最好是弹一个框,让用户关闭从而产生交互。这个暂时找不到更好的办法

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容