使用popstate监听浏览器返回键

原创已于 2022-06-22 14:44:42 修改 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2021-12-31 23:03:26 首次发布

vue 专栏收录该内容

11 篇文章

订阅专栏

该博客主要探讨了在iOS和Android系统中监听浏览器返回键的差异。对于iOS系统，可以直接使用popstate事件监听，但在Android上，由于系统特性，popstate监听返回键可能无效，需要额外调用window.tbs_bridge.nativeExec方法来确保监听生效。提供的代码示例展示了如何针对Android系统进行特殊处理，确保返回键监听正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ios系统可以正常监听，安卓手机用户必须与浏览器有交互操作，例如：先点击一下屏幕，popstate才能监听到返回键，解决方法如下：
判断手机系统为安卓，进入页面时执行代码window.tbs_bridge.nativeExec(“network”,“type”,0,null)
具体代码如下：
var isAndroid=navigator.userAgent.indexOf(“Android”)>-1||navigator.userAgent.indexOf(“Adr”)>-1;
var isIos=navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
history.pushState(null,null,document.URL);//最好加这行，有没有都行
window.addEventListener(“popstate”,this.popFun,false);
if(isAndroid){
try{
//安卓直接使用popstate监听返回键无效，需要加这行代码
window.tbs_bridge.nativeExec(“network”,“type”,0,null)
}catch(e){
console.log(e)
}
}，
popFun(){
console.log(“popFun”)
}