移动web开发中，好用的小方法

enda 发布于2019-08-21 12:37 / 2862人阅读

摘要：保存当前链接添加一个新页面到浏览器历史只有做这一步点击返回按钮才不会返回上一页而是留在本页并触发事件现在的链接和之前保存的一致的话就执行让这个事件只响应一次如果想要防止用户误点击返回键，上面的函数可以这样调用好恐怖，难怪以前一直禁用类似的

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

超融合服务器专线服务移动web开发 web移动端开发 HTML5移动Web开发指南好用的小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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
想要更精准的小程序模版消息推送？我们来帮你实现

摘要：在用户喜爱的众多功能中，使用率最高的是模版消息推送。模版消息推送数的量级也由早期每天几百条，变为后来的每天数百万条。平台支持少知晓云已经支持包括微信小程序和支付宝小程序在内的各大小程序平台的消息推送，对平台的支持也将在近期上线。两年多前，为了让更多的人找到好玩、好用的小程序，我们成立了「知晓程序」。再后来，我们推出了后端云服务平台——知晓云，帮助大家降低创业成本，提升开发效率。「...

Seay 2019-06-25 17:16 评论0 收藏0