移動(dòng)web開(kāi)發(fā)中，好用的小方法

paney129 發(fā)布于2019-08-01 14:43 / 677人閱讀

摘要：保存當(dāng)前鏈接添加一個(gè)新頁(yè)面到瀏覽器歷史只有做這一步點(diǎn)擊返回按鈕才不會(huì)返回上一頁(yè)而是留在本頁(yè)并觸發(fā)事件現(xiàn)在的鏈接和之前保存的一致的話就執(zhí)行讓這個(gè)事件只響應(yīng)一次如果想要防止用戶誤點(diǎn)擊返回鍵，上面的函數(shù)可以這樣調(diào)用好恐怖，難怪以前一直禁用類似的

1.檢查是否觸屏設(shè)備

//此方法在chrome模擬手機(jī)的模式中似乎無(wú)效，但是在iphone中是有效的，在安卓中待測(cè)試
function isTouchDevice() {
    return ("ontouchstart" in document.documentElement);
}

2.檢測(cè)更多的設(shè)備和瀏覽器信息，靠的是ua信息

var browser={
    versions:function(){
            var u = navigator.userAgent, app = navigator.appVersion; 
            return {//移動(dòng)終端瀏覽器版本信息 
                trident: u.indexOf("Trident") > -1, //IE內(nèi)核
                presto: u.indexOf("Presto") > -1, //opera內(nèi)核
                webKit: u.indexOf("AppleWebKit") > -1, //蘋果、谷歌內(nèi)核
                gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐內(nèi)核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否為移動(dòng)終端
                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應(yīng)該程序，沒(méi)有頭部與底部
            };
    }(),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
//document.writeln("語(yǔ)言版本: "+browser.language);
//document.writeln(" 是否為移動(dòng)終端: "+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偵聽(tīng)用戶點(diǎn)擊一次返回按鈕，做到不刷新頁(yè)面，而是回調(diào)函數(shù)

//用法
onBackBtnClick(function () {
    //點(diǎn)擊返回按鈕后要做些什么
});

/**
 * 偵聽(tīng)瀏覽器返回按鈕的點(diǎn)擊事件。
 * ps1.每調(diào)用一次本函數(shù),本瀏覽器窗口會(huì)重定向到一個(gè)新頁(yè)面,但是頁(yè)面不會(huì)刷新,所以在用戶看來(lái)除了地址變了,其它什么都沒(méi)變,
 * 而在瀏覽器看來(lái)是跳到了新頁(yè)面,只是沒(méi)有加載新頁(yè)面的元素
 * @param fn function 當(dāng)用戶點(diǎn)擊瀏覽器返回按鈕,返回到調(diào)用本函數(shù)時(shí)所在頁(yè)面時(shí)執(zhí)行。
 *                      ps.因?yàn)樵试S多次調(diào)用本函數(shù),所以有可能會(huì)跳了很多個(gè)頁(yè)面,所以不是每次點(diǎn)返回鍵都會(huì)調(diào)用這個(gè)函數(shù)
 * @param [one=true] bool 這個(gè)事件是否只響應(yīng)一次,true是,false否。默認(rèn)true。
 * */
function onBackBtnClick(fn,one) {
    var mark = Math.random(),
        thisUrl = location.href;//保存當(dāng)前鏈接

    //添加一個(gè)新頁(yè)面到瀏覽器歷史(只有做這一步,點(diǎn)擊返回按鈕才不會(huì)返回上一頁(yè),而是留在本頁(yè)并觸發(fā)事件)
    history.pushState({}, "", "#newWin&mark="+mark);

    window.addEventListener("popstate",back);

    function back(){
        if(location.href==thisUrl){//現(xiàn)在的鏈接和之前保存的一致的話,就執(zhí)行
            console.log(location.href,thisUrl);
            fn&&fn();
            if(one!==false)
                window.removeEventListener("popstate",back);//讓這個(gè)事件只響應(yīng)一次
        }
    }
}

如果想要防止用戶誤點(diǎn)擊返回鍵，上面的函數(shù)可以這樣調(diào)用：
function disableBackBtn(){
    onBackBtnClick(function(){
        disableBackBtn();
    });
}
disableBackBtn();

好恐怖，難怪以前一直禁用類似的api