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

那么,怎么判断某用户是否安装了某应用呢?

在这里,先写段html代码,如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href="某app下载链接"></a>
</body>
</html>

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

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

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

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

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

<span>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:scheme="**"
android:host="**.**"
android:pathPrefix="/**">
</data>
</intent-filter>
</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. ASP.NET基础之HttpHandler学习

    ASP.NET基础之HttpHandler学习 经过前两篇[ASP.NET基础之HttpModule学习]和[ASP.NET基础之HttpContext学习]文章的学习我们对ASP.NET的基础内容有 ...

  2. 抛掉kendoUI的MultiSelect,自己实现 DropDownList MultiSelect

    我们首先来看下kendoUI官方的下拉框多选: 再来看看telerik RadControls的下拉框多选: 很明显从展现形式上来看,第二种是优于第一种的,至少我是这么认为的 :-) 那我们就对Dro ...

  3. Fast Token Replacement in C#

    http://www.codeproject.com/Articles/298519/Fast-Token-Replacement-in-Csharp Fast Token Replacement i ...

  4. 统计知识选讲(一)——主成分分析(PCA)的思想

    主成分分析的主要目的是希望用较少的变量去解释原来资料中的大部分变异,将我们手中许多相关性很高的变量转化成彼此相互独立或不相关的变量,从而达到降维的目的.在原始数据“预处理”阶段通常要先对它们采用PCA ...

  5. [置顶] Objective-C编程之道iOS设计模式单例解析(2)

    上一篇文章,提到了单例子类化的问题.正好最近,我在Stack Overflow看见一位国外高人,也谈及了单例子类化的一些内容.思考之后,总结了一些内容.其大意是利用NSDirectory存储不同子类的 ...

  6. Memcached 学习笔记(二)——ruby调用

    Memcached 学习笔记(二)——ruby调用 上一节我们讲述了怎样安装memcached及memcached常用命令.这一节我们将通过ruby来调用memcached相关操作. 第一步,安装ru ...

  7. 黑马程序员:Java基础总结----GUI图形化界面

    黑马程序员:Java基础总结 GUI图形化界面   ASP.Net+Android+IO开发 . .Net培训 .期待与您交流!   GUI(Graphical User Interface)图形化界 ...

  8. 结构-行为-样式-PS笔记

    1.矩形选框,按住Shift就可以成为正圆或者正方形.按住ALt就可以控制圆心的位置: 2.美颜:滤镜--模糊--回到开始--历史记录工具,去掉不要的地方. 3.套索工具双击闭合:4.钢笔工具是做选区 ...

  9. Django Function Based View(FBV)和Class Based View (CBV)对比

    一.FBV处理过程 首先来看一下FBV逻辑过程: 1.简单过程(借用官方示例): urls: from django.conf.urls import url from . import views ...

  10. python基础4

    内容概要: 一.递归 递归就是函数本身调用自己,直到满足指定条件之后一层层退出函数 递归特性: 必须有一个明确的结束条件 每次进入更深一层递归时,问题规模相比上次递归都应有所减少 递归效率不高,递归层 ...