js阻止浏览器返回上一页

最近有个项目,客户需要在app内嵌浏览器页面使用rtc通话,但是有前置页面,

出现了安卓机左右滑动返回手势,已经退回前置页面,但web容器并未关闭

所以发生虽然不在rtc页面但是rtc通话内的语音播报并没有中断的异常场景

虽然异常操作不需要我提供解决方案,但还是想试试有没有解决方案,

所以网上找了一圈,发现以下适用方案

注:需要页面进行交互(触摸\点击等)才会生效

页面离开前弹出提示,点击决定是否离开当前页

可以阻塞刷新和后退前进

甚至可以发个请求出去

<template>
    <van-button @click="jump">jump</van-button>
</template>
<script>
import axios from 'axios';
export default {
    mounted() {
        window.onbeforeunload = () => {
            this.exit()
            return "Your work will be lost.";
        };
    },
    methods: {
        exit() {
            axios
                .get('随便连接')
                .then(response => { console.log(1111, response) })
                .catch(function (error) { // 请求失败处理
                    console.log(222, error);
                });
        },
        jump() {
            window.location.reload()
        }
    },
}
</script>