成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動web開發(fā)中，好用的小方法

enda / 3114人閱讀

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

1.檢查是否觸屏設(shè)備 
//此方法在chrome模擬手機(jī)的模式中似乎無效，但是在iphone中是有效的，在安卓中待測試
function isTouchDevice() {
    return ("ontouchstart" in document.documentElement);
}
2.檢測更多的設(shè)備和瀏覽器信息，靠的是ua信息 
var browser={
    versions:function(){
            var u = navigator.userAgent, app = navigator.appVersion; 
            return {//移動終端瀏覽器版本信息 
                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/), //是否為移動終端
                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)該程序，沒有頭部與底部
            };
    }(),
    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偵聽用戶點(diǎn)擊一次返回按鈕，做到不刷新頁面，而是回調(diào)函數(shù) 
//用法
onBackBtnClick(function () {
    //點(diǎn)擊返回按鈕后要做些什么
});

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

    //添加一個新頁面到瀏覽器歷史(只有做這一步,點(diǎn)擊返回按鈕才不會返回上一頁,而是留在本頁并觸發(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);//讓這個事件只響應(yīng)一次
        }
    }
}
如果想要防止用戶誤點(diǎn)擊返回鍵，上面的函數(shù)可以這樣調(diào)用：


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



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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87684.html

相關(guān)文章

  • 移動web開發(fā)中，好用的小方法

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

    paney129 評論0 收藏0

  • 前端相關(guān)匯總

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

    BenCHou 評論0 收藏0

  • 4月份前端資源分享

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

    jsdt 評論0 收藏0

  • 想要更精準(zhǔn)的小程序模版消息推送？我們來幫你實(shí)現(xiàn)

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

    RobinTang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<