浏览器网页判断手机是否安装IOS/Android客户端程序
来源:互联网 发布:python 输入中文报错 编辑:程序博客网 时间:2024/04/28 08:00
IOS
原理如下:
为HTML页面中的超链接点击事件增加一个setTimeout方法。
如果在iPhone上面500ms内,本机有应用程序能解析这个协议并打开程序,则这个回调方法失效;
如果本机没有应用程序能解析该协议或者500ms内没有打开个程序,则执行setTimeout里面的function,就是跳转到apple的itunes。
<html> <head> <meta name="viewport" content="width=device-width" /> </head> <body> <h2><a id="applink1" href="mtcmtc://profile/116201417">Open scheme(mtcmtc) defined in iPhone with parameters </a></h2> <h2><a id="applink2" href="unknown://nowhere">open unknown with fallback to appstore</a></h2> <p><i>Only works on iPhone!</i></p> <script type="text/javascript"> // To avoid the "protocol not supported" alert, fail must open another app. var appstore = "itms://itunes.apple.com/us/app/facebook/id284882215?mt=8&uo=6"; function applink(fail){ return function(){ var clickedAt = +new Date; // During tests on 3g/3gs this timeout fires immediately if less than 500ms. setTimeout(function(){ // To avoid failing on return to MobileSafari, ensure freshness! if (+new Date - clickedAt < 2000){ window.location = fail; } }, 500); }; } document.getElementById("applink1").onclick = applink(appstore); document.getElementById("applink2").onclick = applink(appstore); </script> </body> </html>
Android
同样的原理来处理android的javascript跳转,发现如果本机没有程序注册intent-filter for 这个协议,那么android内置的browser就会处理这个协议并且立即给出反应(404,你懂的),不会像iPhone一样去执行setTimeout里面的function,即便你把500ms改成0ms也不管用。
在AndroidManifest.xml文件中对应Activity中添加如下intent-filter配置:
<activity android:name=".ui.welcome.WelcomeActivity" android:screenOrientation="portrait" android:theme="@android:style/Theme.NoTitleBar" > </activity>
对应HTML页面中指向改应用程序Activity的HyperLink超链接:<a id="applink1" href="toutou://www.toutout.com/mi-tracker-web/download.html">Open Application</a>优化处理:可以配置html的scheme和host以及port、path等为类似如下格式:
http://192.168.167.33:8088/mi-tracker-web/download.html
浏览器在访问这个超链接时,如果手机没有安装相应app,可以设置自动重定向到如下download.jsp(Web Service知识):
<html> <head> <meta name="viewport" content="width=device-width" /> </head> <body> <a id="applink1" href="market://details?id=com.toutouunion">Open Application</a> </html>通过market协议,自动跳转至手机应用商店(前提是手机必须安装有应用商店相关的APP软件)。参考博文:Android Market链接的生成
微信浏览器
由于在微信里面打开网页,会屏蔽掉网页里面的app启动事件,同时也屏蔽掉app的下载链接,导致用户无法判断本地是否安装有相应app或者启动本地app,以及正常下载app的功能,解决方案有两个:
一:提示用户使用手机浏览器打开网页
测试案例二维码:
效果如下:
Js实现的部分源代码:
function is_weixin(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else { return false; }} var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, presto: u.indexOf('Presto') > -1, webKit: u.indexOf('AppleWebKit') > -1, gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, mobile: !!u.match(/AppleWebKit.*Mobile.*/), ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, iPhone: u.indexOf('iPhone') > -1 , iPad: u.indexOf('iPad') > -1, webApp: u.indexOf('Safari') == -1 } }(), language:(navigator.browserLanguage || navigator.language).toLowerCase()}; function init(){ if(is_weixin()){ //weixin为提示使用浏览器打开的div document.getElementById("weixin").style.display="block"; if(browser.versions.ios || browser.versions.iPhone || browser.versions.iPad){ document.getElementById("step2").innerHTML="2. 在Safari中打开"; }else{ document.getElementById("step2").innerHTML="2. 在浏览器中打开"; } }else{ //下载页div document.getElementById("main").style.display="block"; }}init();二:交由应用宝处理
申请应用宝合作,依据应用宝提供的下载链接,跳转至应用宝界面,再点击下载,应用宝会依据手机设备的不同决定跳转至App store或者安卓应用宝的相应下载页面。
应用宝开放平台提供的app下载链接地址格式为:http://a.app.qq.com/o/simple.jsp?pkgname=your package name
如:http://a.app.qq.com/o/simple.jsp?pkgname=com.feng.dota
生成相应二维码:
微信扫一扫打开网页(安卓版):
如果手机安装过该应用的话,“应用宝高速下载”会显示为“打开”
如果没有安装的话,点击高速下载会跳转至应用宝app对应的下载页面(如果没有安装应用宝的话,微信为下载应用宝app,估计是为了推广腾讯自己的应用吧)
微信扫一扫打开网页(IOS版):
如果app store中有这个app的话,会自动跳转至app store的对应app界面中,
如果app store中没有的话,微信会给出网页提示!
- 浏览器网页判断手机是否安装IOS/Android客户端程序
- 浏览器判断是否安装了ios/android客户端程序
- 浏览器判断是否安装了ios/android客户端程序
- 浏览器判断是否安装了ios/android客户端程序
- 浏览器判断是否安装了ios/android客户端程序
- 浏览器判断是否安装了ios/android客户端程序
- 浏览器判断是否安装了ios/android客户端程序
- 浏览器判断是否安装了ios/android客户端程序
- 浏览器判断是否安装了ios/android客户端程序
- 浏览器判断是否安装了ios/android客户端程序
- 浏览器判断是否安装了ios/android客户端程序
- 浏览器判断是否安装了ios/android客户端程序
- 浏览器判断是否安装了ios/android客户端程序
- 浏览器判断是否安装了ios/android客户端程序
- 览器判断是否安装了ios/android客户端程序
- 【android】判断手机是否安装浏览器
- android如何判断手机上是否安装了浏览器
- 通过判断浏览器的userAgent,用正则来判断手机是否是ios(苹果)和Android(安卓)客户端
- 如何屏蔽掉CSDN的垃圾邮件
- 动作手游源码分析3 classes/layer/GameHeroLayer.cpp
- RMAN 'Duplicate Database' Feature in 11G [ID 452868.1]
- 数字图像处理的基本原理和常用方法
- ViewDragHelper详解
- 浏览器网页判断手机是否安装IOS/Android客户端程序
- Tmux 入门介绍
- SGU122 The book
- IOS开发—深入理解 GCD(二)
- iOS 第三方框架,工具等集合
- 常见算法:C语言求最小公倍数和最大公约数三种算法
- HDU1028Ignatius and the Princess III(一个数有多少种组合方式,DP)与放n个苹果在m个盘子有多少生种组合一样(两种方法解)
- 致我曾经敲过的代码——初涉JAVA 自定义链表的实现
- 卷积神经网络功能测试方法