zoukankan      html  css  js  c++  java
  • 如何用js检测手机是否安装某个app

    问题描述

      如果本地安装了app那么直接打开,否则苹果要跳转到app-store,安卓则要跳到对应的市场

    解决方案 一

        
        //html代码中 的 a 标签,以微信为例,默认的是调用weixin scheme,去打开本机的微信,如果没有则跳转到相应连接
        <a href="weixin://" class="btn-download">立即打开</a>
      
        // 为btn-download 绑定事件,如果在500ms内,没有解析到协议,那么就会跳转到下载链接
         var
    appstore, ua = navigator.userAgent; if(ua.match(/Android/i)){ appstore = 'market://search?q=com.singtel.travelbuddy.android'; } if(ua.match(/iphone|ipod|ipad/)){ appstore = "https://itunes.apple.com/cn/app/wei-xin/id414478124?mt=8&ign-mpt=uo%3D4"; } function applink(fail){ return function(){ var clickedAt = +new Date; // During tests on 3g/3gs this timeout fires immediately if less than 500ms. setTimeout(function(){ // To avoid failing on return to MobileSafari, ensure freshness! if (+new Date - clickedAt < 2000){ window.location = fail; } }, 500); }; } $('.icon-download, .btn-download')[0].onclick = applink(appstore);

    解决方案二

    通过在页面中生成一个隐藏的iframe,iframe的src指向 app 协议,例如 weixin scheme,并监听onerror事件,意思是如果无法解析协议,就会触发onerror事件,但是我尝试了一下,未果。代码如下,可参考一下。

         // 页面中有div#iframe-box 用来插入生成的iframe,还是以微信为例
         var
    ifm = document.createElement('iframe'), isInstalled; ifm.style.display = 'none'; ifm.src = 'wixin://'; ifm.onload = function(e){ var e = e || window.event; e.preventDefault(); } ifm.onerror = function(){ //isInstalled = false; alert(1); } document.getElementById('iframe-box').appendChild(ifm);

        // 但这时的问题是,iframe的src成功解析到了协议,则会直接跳转,但是解析不到的话,也不会触发error事件,这个还要继续研究
        // 可以把上面的代码,放到函数中,然后作为某个按钮的响应函数。

    解决方案三

      对于ios手机,会有如下写法

      <meta name="apple-itunes-app" content="app-id=414478124" /> 

      将上面代码放到head中,根据name也会知道意思,app-id是微信的app-id,用ios手机看会看到提示,andriod比可以,结果自行实验。(ios就是强大)

    后续继续研究中......

  • 相关阅读:
    SharePoint学习资料收集
    VS2008 IDE界面
    罗列没有主键的表
    Google Calendar API练习
    pb中数据窗口中字段只显示255个的解决方法
    oracle 中的事务和update from 语句
    sqlserver2005数据库扩容方案
    在一个表上创建非聚集索引和聚集索引
    <xsl:applytemplates/>的应用
    时间戳转换为日期类型
  • 原文地址:https://www.cnblogs.com/huntaheart/p/4571100.html
Copyright © 2011-2022 走看看