博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动web开发中,好用的小方法
阅读量:7078 次
发布时间:2019-06-28

本文共 2570 字,大约阅读时间需要 8 分钟。

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

转载地址:http://pecml.baihongyu.com/

你可能感兴趣的文章
6. python 字符串格式化表达式
查看>>
【BIEE】11_BIEE图形报表在谷歌浏览器64.0.3282.140中访问图例乱码解决
查看>>
Nginx网站常见的跳转配置实例
查看>>
GitFlow工作流常用操作流程
查看>>
asp.net跳出iframe结构转向登录
查看>>
QTTabBar
查看>>
MODBUS协议整理——功能码简述
查看>>
eclipse里maven项目An error occurred while filtering resources解决办法
查看>>
MySQL导入SQL文件及常用命令
查看>>
Can't locate find.pl in @INC (@INC contains: /etc/perl xxxx) at perlpath.pl line 7.
查看>>
c#(.Net)解析xml
查看>>
调整Virtual Box硬盘大小
查看>>
阻塞和非阻塞,同步和异步 总结【转】
查看>>
社会实体经济不断下滑的个人思考
查看>>
Pytorch多GPU并行处理
查看>>
【定制Android系统】Android O 在ROM中添加自己的 so 库(1)——Android.mk 与 Android.bp 的区别【转】...
查看>>
C#中把货币、日期转换成中文大写
查看>>
最近累死人的校园招聘20110928
查看>>
数字信号处理实验(零)—— 一维声音信号处理和二维图像处理
查看>>
HTTP请求:GET与POST方法的区别
查看>>