阅读 3972

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

需求场景

有一天,头儿给我提了这样一个需求:

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

解决思路

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

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进去一个空锚点。希望我这次的经验能给遇到同样问题的朋友一些经验。如果有朋友有更好的解决办法,也希望可以分享给我!

关注下面的标签,发现更多相似文章
评论