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 DOM操作小结与实例
Jan 07 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
vue实现购物车小案例
Sep 27 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
vscode 调试 node.js的方法步骤
Sep 15 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导出中文内容excel文件类实例
2015/07/06 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
js如何获取object类型里的键值
2014/02/18 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
jquery使用经验小结
2015/05/20 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
Python的Django框架使用入门指引
2015/04/15 Python
python实现聊天小程序
2018/03/13 Python
python将list转为matrix的方法
2018/12/12 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
pandas DataFrame运算的实现
2020/06/14 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
法院实习人员自我鉴定
2013/09/26 职场文书
批评与自我批评材料
2014/02/15 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
煤矿安全承诺书
2014/05/22 职场文书
升学宴演讲稿
2014/09/01 职场文书
新生入学欢迎词
2015/01/26 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
详解Spring事件发布与监听机制
2021/06/30 Java/Android
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript