前言
现在手机里面的APP多得数不清，咱们搞前端的可不能被甩在后面这次咱就来聊聊一个超级实用的H5新玩意儿——它可以监控所有应用程序的后退按钮，不管你是爱用安卓机上的实体键还是iPhone上的虚拟按键都行。这个技能保证能满足各种工作需要！
起因
半年前，我接到了个任务，就是用H5做音视播放、暂停和续播，还要嵌进去驾考宝典 App，这个看上去简单，实际上有点难度，但我可是程序员，不怕困难！于是，我就开始了这趟磨练之路。
监听任何App自带返回键
听说要想在安卓机听音乐玩游戏时不手动按返回键，就得这么干！因为苹果手机能自动停，但大部分安卓机却没这功能，咱们只能自力更生搞个“偷窥”软件喽。网上那些以前试过的代码，大多没用，不过后来我运气棒棒哒，得到大神指点，照葫芦画瓢复制那段代码真管用哩。这段代码是通过判断你在哪个界面，然后相应地操作。
手机兼容性
pushHistory();
window.addEventListener("popstate", function(e) {
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
现在各种安卓手机系统版本太多了，很多手机都可以正常识别运行的，但有些低配版的兼容性就差了点。为啥呀？就是因为他们的浏览器内核版本过时了呗。别急，还是有办法的，我们可以去寻找一些兼容性解决方案，虽然无法用JS直接监控到用户按下App自带或物理上的返回键，但我们还是可以想其他办法尽快实现需求，这样效果也是差不多滴。希望这些小知识对你们编程小白有所帮助哟!
结合MDN相关链接
除了我给你介绍的，你也可以去韭菜包(Marikozilla Dev Network)搜一下，这里有好多资料等你看哈。看完之后，你就会更了解H5的功能，学得精通点！想在你自己做的玩意儿上试试这样好用的功能吗？
var hiddenProperty = 'hidden' in document ? 'hidden' :
'webkitHidden' in document ? 'webkitHidden' :
'mozHidden' in document ? 'mozHidden' :
null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
if (document[hiddenProperty]) {
console.log('页面非激活');
}else{
console.log('页面激活')
}
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
技术分享与交流
碰到问题，找队友聊聊呗！跟他们讨论，不仅能从多方面看待问题，更好地掌握那些技术小细节；而且还有可能结识到一帮志同道合的朋友，我们可以伴着技术一起步入人生新阶段，共同成长。
持续学习与实践
大家都知道，搞前端开发，得勤学苦练！时代在发展，科技每天都在变，咱们要保持好奇心，把学过的东西实际运用起来，这样才能跟上节奏。
总结与展望
这文章告诉你H5新功能，最有用的是可以偷听其他应用软件的返回信号希望你看后有所收获！以后科技越来越牛逼，肯定有很多有意思的项目等着我们。千万别忘了学习新知识，大胆尝试，及时总结经验，这样才能在竞争中崭露头角。
评论0