您的位置:澳门新葡8455最新网站 > Web前端 > 应用html5新特点轻便监听其余App自带返回键的演示

应用html5新特点轻便监听其余App自带返回键的演示

发布时间:2019-10-05 16:07编辑:Web前端浏览(69)

    使用h5新特点,轻易监听其余App自带再次来到键

    2018/07/03 · HTML5 · H5

    原来的文章出处: 云叔_又拍云   

    利用html5新特色轻便监听其余App自带再次回到键的示范,html5app

    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相关链接:

    并不是说真话可以通过JS监听到App里的自带再次回到键,以至安卓的物理重返键,而是通过转移思路,飞快实现需要。希望这一个特点能帮到各位。

    上述正是本文的全体内容,希望对我们的就学抱有助于,也愿意大家多多照望帮客之家。

    1、前言 前段时间h5新特征、新标签、新专门的学问等有数不完,并且正在不断完善中,各大浏...

    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", "#"); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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(visibilityChange伊夫nt, onVisibilityChange);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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);

    负有标题解决。
    澳门新葡8455最新网站,这段代码的原理笔者个人知道就是通过判定客商浏览的是还是不是为当前页,进而实行连锁操作。
    那是 MDN相关链接:https://developer.mozilla.org…。

    4、手机宽容性

    刚毅未来的安卓机系统4.0等都是时尚型了,该属性超过50%安卓机都能辨识,个人锋潮型安卓机不能够甄别,原因在于navigator.userAgent内核版本过低,chrome今后成千上万是64+了,所以蒙受该难题若是想艺术合作它就好了。

    并非说真话能够透过JS监听到顾客对App里的自带重回键的直接操作,乃至安卓的物理重回键,而是经过改换思路,急速完结须求。希望以此特性能帮到各位。

    1 赞 1 收藏 评论

    澳门新葡8455最新网站 1

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:应用html5新特点轻便监听其余App自带返回键的演示

    关键词:

上一篇:没有了

下一篇:没有了