挪动web开辟中，好用的小要领

2024年5月8日 199次阅读 来源: 黒之染

1.搜检是不是触屏装备

//此要领在chrome模拟手机的形式中好像无效，然则在iphone中是有用的，在安卓中待测试
function isTouchDevice() {
    return ('ontouchstart' in document.documentElement);
}

2.检测更多的装备和浏览器信息，靠的是ua信息

var browser={
    versions:function(){
            var u = navigator.userAgent, app = navigator.appVersion; 
            return {//挪动终端浏览器版本信息 
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是不是为挪动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或许uc浏览器
                iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是不是为iPhone或许QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是不是iPad
                webApp: u.indexOf('Safari') == -1 //是不是web应当顺序，没有头部与底部
            };
    }(),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
//document.writeln("言语版本: "+browser.language);
//document.writeln(" 是不是为挪动终端: "+browser.versions.mobile);
//document.writeln(" ios终端: "+browser.versions.ios);
//document.writeln(" android终端: "+browser.versions.android);
//document.writeln(" 是不是为iPhone: "+browser.versions.iPhone);
//document.writeln(" 是不是iPad: "+browser.versions.iPad);
//document.writeln(navigator.userAgent);

3.H5侦听用户点击一次返回按钮，做到不革新页面，而是回调函数

//用法
onBackBtnClick(function () {
    //点击返回按钮后要做些什么
});

/**
 * 侦听浏览器返回按钮的点击事宜。
 * ps1.每挪用一次本函数,本浏览器窗口会重定向到一个新页面,然则页面不会革新,所以在用户看来除了地点变了,别的什么都没变,
 * 而在浏览器看来是跳到了新页面,只是没有加载新页面的元素
 * @param fn function 当用户点击浏览器返回按钮,返回到挪用本函数时地点页面时实行。
 *                      ps.由于许可屡次挪用本函数,所以有可能会跳了很多个页面,所以不是每次点返回键都邑挪用这个函数
 * @param [one=true] bool 这个事宜是不是只相应一次,true是,false否。默许true。
 * */
function onBackBtnClick(fn,one) {
    var mark = Math.random(),
        thisUrl = location.href;//保留当前链接

    //增加一个新页面到浏览器汗青(只要做这一步,点击返回按钮才不会返回上一页,而是留在本页并触发事宜)
    history.pushState({}, "", "#newWin&mark="+mark);

    window.addEventListener('popstate',back);

    function back(){
        if(location.href==thisUrl){//如今的链接和之前保留的一致的话,就实行
            console.log(location.href,thisUrl);
            fn&&fn();
            if(one!==false)
                window.removeEventListener('popstate',back);//让这个事宜只相应一次
        }
    }
}

假如想要防备用户误点击返回键，上面的函数能够如许挪用：

function disableBackBtn(){
    onBackBtnClick(function(){
        disableBackBtn();
    });
}
disableBackBtn();

好恐惧，难怪之前一向禁用相似的api

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