使用 h5 新特性，轻松监听任何 App 自带返回键

2018 年 6 月 27 日 前端大全

（点击上方公众号，可快速关注）

作者：驾考宝典WckY

segmentfault.com/a/1190000013700474

1、前言

如今h5新特性、新标签、新规范等有很多，而且正在不断完善中，各大浏览器商对它们的支持，也是相当给力。作为前端程序员，我觉得我们还是有必要积极关注并勇敢地加以实践。接下来我将和各位分享一个特别好用的h5新特性（目前也不是特别新），轻松监听任何App自带的返回键，包括安卓机里的物理返回键，从而实现项目开发中进一步的需求。

2、起因

大概半年前接到pm一需求，用纯h5实现多audio的播放、暂停、续播，页面放至App中，与客户端没有任何的交互，所以与客户端相关的js不需要引用。看上去这需求挺简单的嘛，虽然之前也没做过类似的需求。不管三七二十一，开始了学习之旅。

3、我这里着重介绍下我具体是怎么监听任何App自带的返回键，以及安卓机里的物理返回键。

那为什么我要去监听呢，这里我有必要强调强调再强调。苹果手机不管是微信、QQ、App，还是浏览器里，涉及到audio、video，返回上一页系统会自动暂停当前的播放的，但不是所有安卓机都可以。所以我们自己必须自定义监听。很多朋友可能第一想法就是百度，然后出来的答案无非是这样：

    pushHistory(); 
  
  
    
   
   
         window.addEventListener("popstate", function(e) { 
   
   
             alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
   
   
         }, false); 
   
   
         function pushHistory() { 
   
   
             var state = { 
   
   
                 title: "title", 
   
   
                 url: "#"
   
   
             }; 
   
   
             window.history.pushState(state, "title", "#"); 
   
   
         }

是不是很眼熟？然而关键需求不能完美实现，要这段代码有何用，当时我也是绞尽脑汁。直到经过大神好友指导，复制了这段代码：

  
  
    
   
   
         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);