有些时候在做前端输出的时候，需要和app的做些对接工作。就是在手机浏览器中下载某app时，能判断该用户是否安装了该应用。如果安装了该应用，就直接打开该应用；如果没有安装该应用，就下载该应用。那么下面就对在浏览器中，用js判断某用户是否安装了该应用，并判断是否打开该应用做个简单的介绍。

那么，怎么判断某用户是否安装了某应用呢？

在这里，先写段html代码，如下：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. 	<meta charset="utf-8">
  5. </head>
  6. <body>
  7. 	<a href="某app下载链接"></a>
  8. </body>
  9. </html>

判断手机端是否安装某应用，并打开该应用的js代码如下：

  1. 	function isInstalled(){
  2. 		var the_href=$(".down_app").attr("href");//获得下载链接
  3. 		window.location="apps custom url schemes";//打开某手机上的某个app应用
  4. 		setTimeout(function(){
  5. 			window.location=the_href;//如果超时就跳转到app下载页
  6. 		},500);
  7. 	}

下面对这段js代码做一个简单的解析：首先试着打开手机端某个app的本地协议；如果超时就转到app下载页，下载该app。

说到这里，有人就要问了，这个本地协议又是怎么建立的呢？好了，下面也就这个做个简单的介绍：

其实就是在app中将http协议转换为本地协议，具体怎么转换，不在本讨论范围。但需要在app里面对配置文件做一下设置（一般是在manifest.xml文件的activity的intent filter里面）：

  1. <span>
  2. <intent-filter>
  3.                <action android:name="android.intent.action.VIEW" />
  4.                <category android:name="android.intent.category.DEFAULT" />
  5.                <category android:name="android.intent.category.BROWSABLE" />
  6.                <data
  7.             android:scheme="**"
  8.             android:host="**.**"
  9.             android:pathPrefix="/**">
  10.          </data>
  11. </intent-filter>
  12. </span>

apps custom url schemes是什么呢？

其实就是你与app约定的一个协议URL，在iOS客户端或者Android客户端中可以设置一个URL Scheme。例如，设置URL Scheme：app，然后其他的程序就可以通过“ URLString=app://”调用该应用。还可以传参数，如：app://reaction/?uid=1

以上介绍了怎么创建该本地协议及调用该本地协议的方法。但这里还有个关键就是怎么判断用户是否安装了该app呢？原理如下：

在手机浏览器中用js代码请求该协议，如果在500ms内，如果有应用程序能解析这个协议，那么就能打开该应用；如果超过500ms就跳转到app下载页。

HTML中判断手机是否安装某APP，跳转或下载该应用的更多相关文章

  1. ios开发判断手机是否安装微信app

    1.代码如下 if ([WXApi isWXAppInstalled]) 2.如果以上代码无效,请在plist文件中添加如下内容

  2. 利用RxJava获取手机已安装的App的图片、应用名称和版本号

    先上效果图: 获取手机已安装的App列表利用Android系统API就可以办到,这里为什么要引入RxJava?现在我们假设一下有下面几个需求: 1.我们不需要所有的App,只需要用户安装的第三方App ...

  3. 浏览器网页判断手机是否安装IOS/Android客户端程序

    IOS 原理如下: 为HTML页面中的超链接点击事件增加一个setTimeout方法. 如果在iPhone上面500ms内,本机有应用程序能解析这个协议并打开程序,则这个回调方法失效: 如果本机没有应 ...

  4. Android中获取系统上安装的APP信息

    Version:0.9 StartHTML:-1 EndHTML:-1 StartFragment:00000099 EndFragment:00003259 Android中获取系统上安装的APP信 ...

  5. js判断手机是否安装了某一款app，有则打开，没有去下载

    function openApp(){ if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { var loadDateTime = new ...

  6. 如何用js检测手机是否安装某个app

    问题描述 如果本地安装了app那么直接打开,否则苹果要跳转到app-store,安卓则要跳到对应的市场 解决方案 一 //html代码中 的 a 标签,以微信为例,默认的是调用weixin schem ...

  7. 点击app分享链接,js判断手机是否安装某款app,有就尝试打开,没有就下载

    html: <h1 class="downlink"> 前往 </h1> js: document.addEventListener('DOMContent ...

  8. android检测手机是否安装某个app

    public static boolean isAvilible(Context context, String packageName){ //获取packagemanager final Pack ...

  9. mac 上如何安装非app store上的下载的软件-------打开未知来源

    打开了 Terminal 终端后 ,在命令提示后输入 sudo spctl --master-disable 并按下回车执行,如下图所示.   随后再输入当前 Mac 用户的密码,如下图所示.   如 ...

随机推荐

  1. 虚拟化平台cloudstack新版本的调试

    虚拟化平台cloudstack(7)——新版本的调试 调试环境 ubuntu 12.04 JDK1.7 apache-maven-3.10 eclipse 4.2 Juno mysql 5 源码下载及 ...

  2. WPF制作的小型笔记本

    WPF制作的小型笔记本-仿有道云笔记 楼主所在的公司不允许下载外部资源, 不允许私自安装应用程序, 平时记录东西都是用记事本,时间久了很难找到以前记的东西. 平时在家都用有道笔记, 因此就模仿着做了一 ...

  3. MBR . Have it removed!

    To know what it is, https://wiki.archlinux.org/index.php/Master_Boot_Record For a SD card, dd if=/de ...

  4. Python学习入门基础教程(learning Python)--6.3 Python的list切片高级

    上节"6.2 Python的list访问索引和切片"主要学习了Python下的List的访问技术:索引和切片的基础知识,这节将就List的索引index和切片Slice知识点做进一 ...

  5. 读excel时候出现java内存溢出

    修改Eclipse,或MyEclipse的内存 例如MyEclipse 在window->preferences->myeclipse->application server-> ...

  6. js 数组常用的操作函数整理

    平时多做企业应用开发,抱着实用为主,对前端技术理解得比较肤浅,下面就是肤浅地对 js 数组的属性和方法及对它操作的 jquery 方法做些记录: js 数组是 js 内建的一个非常强大数据类型,由于 ...

  7. Mvc分页组件MvcSimplePager代码重构

    1 Mvc分页组件MvcSimplePager代码重构 1.1 Intro 1.2 MvcSimplePager 代码优化 1.3 MvcSimplePager 使用 1.4 End Mvc分页组件M ...

  8. 转载 C#文件上传

     一.分析 本次博客,主要解决文件上传等一系列问题,将从两方面来论述,即1G以内文件和1G以上文件. 对于上传1G以内的文件,可以采用基本的三种上传方法:用Web控件FileUpload.html控件 ...

  9. HttpContext.Current.Request.ServerVariables

    Request.ServerVariables("Url") 返回服务器地址Value 0: /WebSite1/Default.aspx Request.ServerVariab ...

  10. url截取

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...