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 相关文章推荐
JQuery 学习笔记 选择器之三
Jul 23 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 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 APC配置文件2套和参数详解
2014/06/11 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
简单的分页代码js实现
2016/05/17 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
Python操作列表的常用方法分享
2014/02/13 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
python实现发送邮件功能
2017/07/22 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
英国精品买手店:Browns Fashion
2016/09/29 全球购物
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
在校实习生求职信
2014/06/18 职场文书
助残日活动总结
2014/08/27 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏