移動web開發中，好用的小方法

enda 發布于2019-08-21 12:37 / 3106人閱讀

摘要：保存當前鏈接添加一個新頁面到瀏覽器歷史只有做這一步點擊返回按鈕才不會返回上一頁而是留在本頁并觸發事件現在的鏈接和之前保存的一致的話就執行讓這個事件只響應一次如果想要防止用戶誤點擊返回鍵，上面的函數可以這樣調用好恐怖，難怪以前一直禁用類似的

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

GPU云服務器云服務器移動web開發 web移動端開發 HTML5移動Web開發指南好用的小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87684.html

移動web開發中，好用的小方法

摘要：保存當前鏈接添加一個新頁面到瀏覽器歷史只有做這一步點擊返回按鈕才不會返回上一頁而是留在本頁并觸發事件現在的鏈接和之前保存的一致的話就執行讓這個事件只響應一次如果想要防止用戶誤點擊返回鍵，上面的函數可以這樣調用好恐怖，難怪以前一直禁用類似的 1.檢查是否觸屏設備 //此方法在chrome模擬手機的模式中似乎無效，但是在iphone中是有效的，在安卓中待測試 function isTouc...

paney129 2019-08-01 14:43 評論0 收藏0
前端相關匯總

摘要：簡介前端發展迅速，開發者富有的創造力不斷的給前端生態注入新生命，各種庫框架工程化構建工具層出不窮，眼花繚亂，不盲目追求前沿技術，學習框架和庫在滿足自己開發需求的基礎上，然后最好可以對源碼進行調研，了解和深入實現原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

BenCHou 2019-08-23 12:31 評論0 收藏0
4月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享關于的思考一款有趣的動畫效果跨站資源共享之二最流行的編程語言能做什么到底什么是閉包的第三個參數跨域資源共享詳解阮一峰前端要給力之語句在中的值周愛民中國第二屆視頻花絮編碼規范前端工程師手冊奇舞周刊被忽視的更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfron...

jsdt 2019-08-20 15:54 評論0 收藏0
想要更精準的小程序模版消息推送？我們來幫你實現

摘要：在用戶喜愛的眾多功能中，使用率最高的是模版消息推送。模版消息推送數的量級也由早期每天幾百條，變為后來的每天數百萬條。平臺支持少知曉云已經支持包括微信小程序和支付寶小程序在內的各大小程序平臺的消息推送，對平臺的支持也將在近期上線。兩年多前，為了讓更多的人找到好玩、好用的小程序，我們成立了「知曉程序」。再后來，我們推出了后端云服務平臺——知曉云，幫助大家降低創業成本，提升開發效率。「...

RobinTang 2019-08-23 16:41 評論0 收藏0