JS监听手机物理返回键（及IOS微信端的bug）

leywis
10,741 阅读3分钟

需求场景

有一天，头儿给我提了这样一个需求：

无论页面如何跳转，在首页的时候再按返回，直接退出...

解决思路

关闭网页好说，由于我们的项目是微信公众号，直接调用微信浏览器的内置函数：

WeixinJSBridge.call('closeWindow')

但是怎么监听到这个返回的事件呢？办法呢还是有滴！

1. popstate-一个可以监听历史记录点的API

JavaScript中没有监听物理返回键的API，所以通过监听浏览器历史记录的变化来实现。

在HTML5就提供给我们 popstate 用来监听历史记录点。

window.addEventListener("popstate", function(e) { 
    // 如果监听到返回，就跳转到百度首页
    window.location = 'http://www.baidu.com';
}, false);

2. 监听不到？pushState来告诉你为什么

当我们完成两个页面来测试步骤一中代码的时候，发现返回的时候根本没跳转到百度首页。

hi

转念一想不对啊，监听到popstate事件的一瞬间就返灰到上一页面了啊。为啥没反应，心里有点了逼数了啊！

不卖关子了，为了能返回后不回到上一级页面，可以使用 pushState 来向历史记录栈中在插入一条新纪录。

注意: 此处为了返回不跳转，插入一个锚链接（此处有坑，下文解释）就行


/**
* window.history.pushState(state, title, url)
*
* state：与要跳转到的URL对应的状态信息。
* title：现在大多数浏览器不支持或者忽略这个参数，最好用null代替。
* url：要跳转到的URL地址，不能跨域。
**/ 

var state = { 
    title: "title", 
    url: "#"
}; 
window.history.pushState(state, null, "#");

没意外的话，现在配合步骤一中代码，是可以监听到页面返回事件，从而跳转到百度首页。这也是网上能看到的绝大多数的思路。提醒一下，replaceState 虽然也可以改变历史记录栈，但是为了不破坏原有历史记录，此处最好使用 pushState。

3. 简单整理一下前两步中代码

// 封装一下push历史记录的方法
function pushHistory() { 
    var state = { 
        title: "title", 
        url: "#" 
    }; 
    window.history.pushState(state, null, "#"); 
} 

// 在需要监听的页面执行该方法
pushHistory();
window.addEventListener("popstate", function(e) { 
    // 如果监听到返回，就跳转到百度首页
    window.location = 'http://www.baidu.com';
}, false);

问题搜集（网上搜集）

在微信中进入页面就触发了popstate事件

解决方法：定义boolean 变量bool=false。在页面加载后，采用setTimeout方法设置1.5s的超时，在超时执行方法中设置bool=true。

// 封装一下push历史记录的方法
function pushHistory() { 
    var state = { 
        title: "title", 
        url: "#" 
    }; 
    window.history.pushState(state, null, "#"); 
} 

// 在需要监听的页面执行该方法
var bool=false;
setTimeout(function(){
   bool=true;
},1500);

pushHistory();
window.addEventListener("popstate", function(e) { 
    // 如果监听到返回，就跳转到百度首页
    if(bool){
        window.location = 'http://www.baidu.com';   
    }
    pushHistory();
}, false);

这是网上看到好多人遇到的问题，虽然加了延迟，但是仍然解决不了我的问题，也许是应用场景的不同，此处暂时记下，做个参考

IOS微信端popstate自动触发的解决

在IOS端的微信，如果页面A->页面B，如果两个页面都设置了返回重定向（也就是以上代码），按下返回键的时候，页面A的popstate也会自动触发，管你设置多少延迟也没用。

当时在网上找了很多方法，都没解决。

也许是自己手欠的缘故，有一次在毫无思路的情况下，在锚链接后加了个标识：

// 封装一下push历史记录的方法
function pushHistory() { 
    var state = { 
        title: "title", 
        url: "#forward" 
    }; 
    window.history.pushState(state, null, "#forward"); 
} 

// 在需要监听的页面执行该方法
pushHistory();
window.addEventListener("popstate", function(e) { 
    // 如果监听到返回，就跳转到百度首页
    window.location = 'http://www.baidu.com';
}, false);

你妹的，居然解决了

当然，此时我原来加的延迟也去掉了，反正对我来说也没什么用了！

总结： 在使用以上方式实现返回重定向的时候，切记不要只push进去一个空锚点。希望我这次的经验能给遇到同样问题的朋友一些经验。如果有朋友有更好的解决办法，也希望可以分享给我！

avatar
文章
阅读
粉丝