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

2024年3月23日 273次阅读 来源: WckY

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

一切题目水到渠成。
这段代码的道理我个人明白就是经由过程推断用户阅读的是不是为当前页，从而举行相干操纵。
这是 MDN相干链接:https://developer.mozilla.org…。

4、手机兼容性

尽人皆知如今的安卓机体系4.0等都是低配版了，该属性大部分安卓机都能辨认，个人低配版安卓机没法辨认，缘由在于navigator.userAgent内核版本太低，chrome如今许多是64+了，所以碰到该题目只需想办法兼容它就好了。

并不是说真的能够经由过程JS监听到用户对App里的自带返回键的直接操纵，以至安卓的物理返回键，而是经由过程改变思绪，疾速完成需求。愿望这个特征能帮到列位。

    原文作者：WckY
    原文地址: https://segmentfault.com/a/1190000013700474
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞