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 相关文章推荐
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
Vue中keep-alive组件作用详解
Feb 04 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 xfocus防注入资料
2008/04/27 PHP
php数组总结篇(一)
2008/09/30 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
PHP如何使用Memcached
2016/04/05 PHP
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python备份文件的脚本
2008/08/11 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
促销活动策划方案
2014/01/12 职场文书
现场施工员岗位职责
2014/03/10 职场文书
表彰会主持词
2014/03/26 职场文书
幼师求职自荐信
2014/05/31 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android