H5-监听任何安卓机、App自带的物理返回键

3,592 阅读1分钟

1、的h5新特性,监听任何App自带的返回键,包括安卓机里的物理返回键,从而实现项目开发中进一步的需求。

2、用纯h5实现多audio的播放、暂停、续播,页面与客户端没有任何的交互,所以与客户端相关的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);

4、手机兼容性
现在的安卓机系统4.0等都是低配版了,该属性大部分安卓机都能识别,个人低配版安卓机无法识别,原因在于navigator.userAgent内核版本过低,chrome现在很多是64+了,所以遇到该问题只要想办法兼容它就好了。