js判断移动端是否安装某款app的多种方法


Posted in Javascript onDecember 18, 2015

本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下

第一种方法:

一:判断是那种设备

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

二:安卓设备:原理:判断是否认识这个协议,认识则直接跳转,不认识就在这里下载app

android();

if(isAndroid){
      function android(){
        window.location.href = "openwjtr://com.tyrbl.wjtr"; /***打开app的协议,有安卓同事提供***/
        window.setTimeout(function(){
           window.location.href = "http://www.wjtr.com/download/index.html"; /***打开app的协议,有安卓同事提供***/
        },2000);
      };

二:ios设备:原理:判断是否认识这个协议,认识则直接跳转,不认识就在这里下载appios();

if(isiOS){
      function ios(){
        var ifr = document.createElement("iframe");
        ifr.src = "openwjtr://com.tyrbl.wjtr"; /***打开app的协议,有ios同事提供***/
        ifr.style.display = "none"; 
        document.body.appendChild(ifr);
        window.setTimeout(function(){
          document.body.removeChild(ifr);
           window.location.href = "http://www.wjtr.com/download/index.html"; /***下载app的地址***/
        },2000)
      };
}

第二种方法:

虽然在Js中可以启动某个app,但是并不能判断该app是否安装;
启动app需要的时间较长,js中断时间长,如果没安装,js瞬间就执行完毕。直接上代码吧!
html代码:

<a href="javascript:testApp('tel:1868888888')">打电话</a>

js代码:

function testApp(url) { 
  var timeout, t = 1000, hasApp = true; 
  setTimeout(function () { 
    if (hasApp) { 
      alert('安装了app'); 
    } else { 
      alert('未安装app'); 
    } 
    document.body.removeChild(ifr); 
  }, 2000) 
 
  var t1 = Date.now(); 
  var ifr = document.createElement("iframe"); 
  ifr.setAttribute('src', url); 
  ifr.setAttribute('style', 'display:none'); 
  document.body.appendChild(ifr); 
  timeout = setTimeout(function () { 
     var t2 = Date.now(); 
     if (!t1 || t2 - t1 < t + 100) { 
       hasApp = false; 
     } 
  }, t); 
}

第三种方法:

最近在做项目的wap版,有个需求就是,先判断手机上是否有我们的APP应用,如果有的话打开应用,没有才跳转到wap页面。 
wap简单来说就是运行在移动端浏览器上的网站。不管应用在什么地方,总之就是浏览器呗,可以通过JS来判断本地是否有某应用,实现方式实际就是将http协议转为本地软件协议。 
还是直接贴代码吧。
 如下: 

<script language="javascript">
 if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
  var loadDateTime = new Date();
  window.setTimeout(function() {
   var timeOutDateTime = new Date();
   if (timeOutDateTime - loadDateTime < 5000) {
    window.location = "要跳转的页面URL";
   } else {
    window.close();
   }
  },
  25);
  window.location = " apps custom url schemes ";
 } else if (navigator.userAgent.match(/android/i)) {
  var state = null;
  try {
   state = window.open("apps custom url schemes ", '_blank');
  } catch(e) {}
  if (state) {
   window.close();
  } else {
   window.location = "要跳转的页面URL";
  }
 }
</script>

apps custom url schemes 是什么呢?
其实就是你与APP约定的一个协议URL,你的IOS同事或Android同事在写程序的时候会设置一个URL Scheme,
例如设置:
URL Scheme :app
然后其他的程序就可以通过URLString = app://  调用该应用。
还可以传参数,如:
app://reaction/?uid=1
原理:500ms内,本机有应用程序能解析这个协议并打开程序,调用该应用;如果本机没有应用程序能解析该协议或者500ms内没有打开这个程序,则执行setTimeout里面的function,就是跳转到你想跳转的页面。

以上就是js判断移动端是否安装某款app的多种方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
javascript实现保留两位小数的多种方法
Dec 18 #Javascript
原生js实现图片轮播特效
Dec 18 #Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 #Javascript
浏览器兼容性问题大汇总
Dec 17 #Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 #Javascript
js调出上下文菜单的实例
Dec 17 #Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 #Javascript
You might like
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Python正则简单实例分析
2017/03/21 Python
python实现微信自动回复机器人功能
2019/07/11 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
浅析Python迭代器的高级用法
2020/07/16 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
党风廉政承诺书
2014/03/27 职场文书
竞选村长演讲稿
2014/04/28 职场文书
社团活动总结
2014/04/28 职场文书
区级文明单位申报材料
2014/05/15 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
同意迁入证明模板
2014/10/26 职场文书
摘录式读书笔记
2015/07/01 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
Pytorch 实现变量类型转换
2021/05/17 Python
python Django框架快速入门教程(后台管理)
2021/07/21 Python
Python制作动态字符画的源码
2021/08/04 Python