不同浏览器引用不同JS

最新推荐文章于 2021-09-11 18:11:15 发布

原创最新推荐文章于 2021-09-11 18:11:15 发布 · 5.9k 阅读

0 ·

CC 4.0 BY-SA版权

phonegap 同时被 2 个专栏收录

7 篇文章

订阅专栏

HTML5

2 篇文章

订阅专栏

根据浏览器类型，引用相应的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>

电脑上运行结果如下：