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

本文实例讲解了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的多种方法,希望对大家的学习有所帮助。

(0)

相关推荐

  • JS实现点击网页判断是否安装app并打开否则跳转app store

    常常有这样的场景,咱们开发出来的APP需要进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码.但往往我们都是直接给推广图片加了一个下载链接(App Store中的).所以咱们来模拟一下用户的操作步骤: 1.用户第一次访问宣传页面 a.点击Banner,进入到APP Store中对应的APP下载页 b.APP下载页中提示:安装:用户点击安装 c.安装完成后,APP下载页中提示:打开:用户继续点击打开 d.用户正常使用APP 2.用户第二次访问宣传页面 a.点击Banner,进入到AP

  • 用于deeplink的js方法(判断手机是否安装app)

    代码功能:判断手机/平板是否安装app如果安装 则调用app的scheme,传入url当作参数,来做后续操作如果没有安装 则跳转到app store/google play 下载app 复制代码 代码如下: (function() {var openUrl = window.location.search;try{openUrl = openUrl.substring(1,openUrl.length);}catch(e){ }var isiOS = navigator.userAgent.ma

  • 利用js判断手机是否安装某个app的多种方案

    前言 大家在日常开发的时候,经常会遇到这样的需求,通过检测手机,如果本地安装了app那么直接打开,否则苹果要跳转到app-store,安卓则要跳到对应的市场,下面来给大家介绍几种解决的方案. 解决方案 一 //html代码中 的 a 标签,以微信为例,默认的是调用weixin scheme,去打开本机的微信,如果没有则跳转到相应连接 <a href="weixin://" rel="external nofollow" class="btn-down

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

    本文实例讲解了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终端 二:安卓设备:原理:判断是否认识这个协议,认识则直接跳转,不认识

  • 判断客户端浏览器是否安装了Flash插件的多种方法

    常用的方法: 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); (swf) ? document.writeln('你已经安装了插件') : document.writeln('你没有安装插件'); // --> </SCRIPT> [code] 动态加载. [code] <OB

  • 使用JS判断移动端手机横竖屏状态

    禁用用户自动缩放功能: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 判断横竖屏状态有两种方法:css判断.js判断 (一).css判断横屏还是竖屏 1.写在同一个css文件中 @media screen and (orientation: portrait) { /*竖屏 css*/ }

  • js判断移动端横竖屏视口检测实现的几种方法

    目录 1.不同视口的获取方法 2.JavaScript检测横竖屏 3.CSS检测横竖屏 4.meta标签属性设置 5.meta标签属性设置设置刘海屏&底部小黑条 1.不同视口的获取方法 // 获取视觉视口大小(包括垂直滚动条) let iw = window.innerWidth, ih = window.innerHeight; console.log(iw, ih); // 获取视觉视口大小(内容区域大小,包括侧边栏.窗口镶边和调整窗口大小的边框) let ow = window.outer

  • JS判断客服QQ号在线还是离线状态的方法

    本文实例讲述了JS判断客服QQ号在线还是离线状态的方法.分享给大家供大家参考.具体分析如下: 不知道从什么时候开始,原来QQ官方自带的在线离线状态的代码已经不能准确显示在线或离线状态了,现在自己用JS判断QQ在线离线状态值,根据状态值输出在线图片还是离线图片. 复制代码 代码如下: <script src="JS/jquery-1.5.1.min.js"></script> <div class="kfli" onclick="

  • js判断出两个字符串最大子串的函数实现方法

    如下所示: <!DOCTYPE html> <html> <head> <title></title> </head> <script type="text/javascript"> function search(str1,str2) { var i=j=k=a=jk=kk=0; var m=str1.length; var n=str2.length; var index=0; var maxlen

  • javascript判断移动端访问设备并解析对应CSS的方法

    本文实例讲述了javascript判断移动端访问设备并解析对应CSS的方法.分享给大家供大家参考.具体分析如下: javascript判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的): 复制代码 代码如下: // 判断是否为移动端运行环境  if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel

  • JS判断字符串变量是否含有某个字串的实现方法

    JS判断字符串变量是否含有某个字串的实现方法 varCts = "bblText"; if(Cts.indexOf("Text") > 0 ){ alert('Cts中包含Text字符串'); } indexOf用法: 返回 String 对象内第一次出现子字符串的字符位置. strObj.indexOf(subString[, startIndex]) 参数 strObj 必选项.String 对象或文字. subString 必选项.要在 String 对

  • js判断价格,必须为数字且不能为负数的实现方法

    如下所示: <pre name="code" class="html"><input type="text" onpaste="if(IsNum(window.clipboardData.getData('text'))==false) return false;" class="input-txt-small" id="productPrice" onblur=&qu

  • js判断文件类型大小并给出提示的实现方法

    上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求: <form id="uploadForm" method="post" class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">名称</label> <div cla

随机推荐