应用html5新特点轻轻松松监视任何App自带回到键的

日期:2020-10-10 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

1、序言

现如今h5新特点、新标识、新标准等有许多,并且正在持续健全中,各大访问器商对它们的适用,也是非常给力。做为前端开发程序流程员,我感觉大家還是必须积极主动关心并英勇地加以实践活动。接下来我将和各位共享1个非常功能强大的h5新特点(现阶段也并不是非常新),轻轻松松监视任何App自带的回到键,包含安卓系统机里的物理学回到键,从而完成新项目开发设计中进1步的要求。

2、诱因

大约半年前接到pm1要求,用纯h5完成多audio的播发、中止、续播,网页页面放至驾考宝典App中,与顾客端沒有任何的互动,因此与顾客端有关的js不必须引入。看上去这要求挺简易的嘛,尽管以前也没做过相近的要求。无论372101,撸起袖子便是干。刚开始了学习培训之旅。

3、我这里侧重详细介绍下我实际是如何监视任何App自带的回到键,和安卓系统机里的物理学回到键。

那为何我要去监视呢,这里我必须强调强调再强调。iPhone手机上无论是手机微信、QQ、App,還是访问器里,涉及到到audio、video,回到上1页系统软件会全自动中止当今的播发的,但并不是全部安卓系统机都可以以。因此大家自身务必自定监视。许多盆友将会第1念头便是百度搜索,随后出来的回答不过是这样

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/zh-CN/docs/Web/API/Document/hidden

其实不是说真的能够根据JS监视到App里的自带回到键,乃至安卓系统的物理学回到键,而是根据变化思路,迅速完成要求。期待这个特点能帮到各位。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。