根据浏览器类型,引用相应的JS。即判断是PC浏览器还是手机浏览器。
PC浏览器加载引用cordova.js的页面时,会弹出很多对话框,如下图所示,影响用户体验,而手机上不会出现这种现象,因为phonegap本身就是为了移动终端的web引用调用本地功能而产生的。
这就需要在页面加载时,先判断浏览器类型,如果是PC端的浏览器,则取消引用cordova.js;
在页面中引入下面的js,单独作为一个js文件:judgePlatform.js,,代码如下:
/*
* 智能机浏览器版本信息:
*
*/
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()
}
下面写一个demo.html,代码如下:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="judgePlatform.js"></script>
<script type="text/javascript">
txt="<p>语言版本: "+browser.language + "</p>";
txt+="<p> 是否为移动终端: "+browser.versions.mobile + "</p>";
txt+="<p> ios终端: "+browser.versions.ios + "</p>";
txt+="<p> android终端: "+browser.versions.android + "</p>";
txt+="<p> 是否为iPhone: "+browser.versions.iPhone + "</p>";
txt+="<p> 是否iPad: "+browser.versions.iPad + "</p>";
txt+=navigator.userAgent + "</p>";
document.getElementById("example").innerHTML=txt;
if(browser.versions.mobile){
document.write("<script type=\"text/javascript\" src=\"cordova.js\"><\/script>"); //为移动设备时则引入cordova.js
}
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("pause",onPause,false);
document.addEventListener("resume",onResume,false);
document.addEventListener("backbutton", onBackButton, false);
}
function onPause() {
alert("pause");
}
function onResume() {
alert("resume");
}
function onBackButton() {
alert("backbutton");
}
</script>
</head>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<div id="example"></div>
</div>
</div>
</body>
</html>
电脑上运行结果如下:
手机上运行结果如下,
当点手机的返回按钮时,会弹出如下对话框,说明在手机端cordova.js已经引入,并且可用!