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[js]获取url参数的代码
Oct 17 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
微信小程序实现animation动画
Jan 26 Javascript
vue-swiper的使用教程
Aug 30 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
浅谈React之状态(State)
Sep 19 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 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 在文件指定行插入数据的代码
2010/05/08 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
森林防火标语
2014/06/23 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android