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