JS检测是手机否安装App并打开，否则跳转App Store的方法

布满荆棘的人生 2022-10-01 04:53 290阅读 0赞

常常有这样的场景，咱们开发出来的APP需要进行推广，比如在页面顶部来一张大Banner图片，亦或一张二维码。但往往我们都是直接给推广图片加了一个下载链接（App Store中的）。所以咱们来模拟一下用户的操作步骤：

1、用户第一次访问宣传页面

a、点击Banner，进入到APP Store中对应的APP下载页

b、APP下载页中提示：安装；用户点击安装

c、安装完成后，APP下载页中提示：打开；用户继续点击打开

d、用户正常使用APP

2、用户第二次访问宣传页面

a、点击Banner，进入到APP Store中对应的APP下载页

b、APP下载页中提示：打开；用户直接点击打开

c、用户正常使用APP

3、用户第三次、第四次、…、第N次访问，操作步骤同2

能看出来，不管是点击Banner还是扫描二维码的方式，对于已经安装过APP的用户来说，这个体验都是非常糟糕的。

更优的体验是：点击Banner（或扫描二维码）后，程序判断当前系统是否已安装App，如果未安装，则自动跳转到App Store下载页；否则直接打开App。

在[iOS][]上，要增加一个APP的大Banner，其实只需要在<head>标签内增加一个<meta>标签即可，格式如：

比如加一个百度贴吧的Native APP大Banner，用下面这串儿代码：

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <meta name=‘apple-itunes-app’ content=‘app-id=477927812’>

![save_snippets_01.png][]

而对于点击链接后，能否直接打开，可以通过下面的代码来实现。前提条件：你得知道你的APP对应的打开协议，如贴吧APP，协议为：com.baidu.tieba:// ，[微信][Link 1]的：weixin:// ，and so on。。。

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <!– a标签的链接，设置为对应的下载链接；点击打开的动作，在click事件中注册 –>  
2.  <a href=“https://itunes.apple.com/cn/app/id477927812” id=“openApp”>贴吧客户端</a>  
3.  <script type=“text/javascript”>  
4.      document.getElementById(‘openApp’).onclick = function(e)\{  
5.          // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为  
6.          // 否则打开a标签的href链接  
7.          var ifr = document.createElement(‘iframe’);  
8.          ifr.src = ‘com.baidu.tieba://’;  
9.          ifr.style.display = ‘none’;  
10.         document.body.appendChild(ifr);  
11.         window.setTimeout(function()\{  
12.             document.body.removeChild(ifr);  
13.         \},3000)  
14.     \};  
15. </script>

![save_snippets.png][]

<a href="https://itunes.apple.com/cn/app/id477927812" id="openApp">贴吧客户端</a>
    <script type="text/javascript">
        document.getElementById('openApp').onclick = function(e){
            // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
            // 否则打开a标签的href链接
            var ifr = document.createElement('iframe');
            ifr.src = 'com.baidu.tieba://';
            ifr.style.display = 'none';
            document.body.appendChild(ifr);
            window.setTimeout(function(){
                document.body.removeChild(ifr);
            },3000)
        };
    </script>

当然，如果你是设计成一张二维码，可以用下面这段代码：

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <!– a标签的链接，设置为对应的下载链接；点击打开的动作，在click事件中注册 –>  
2.  <a href=“https://itunes.apple.com/cn/app/id477927812” id=“openApp” style=“display: none”>贴吧客户端</a>  
3.  <script type=“text/javascript”>  
4.      document.getElementById(‘openApp’).onclick = function(e)\{  
5.          // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为  
6.          // 否则打开a标签的href链接  
7.          var ifr = document.createElement(‘iframe’);  
8.          ifr.src = ‘com.baidu.tieba://’;  
9.          ifr.style.display = ‘none’;  
10.         document.body.appendChild(ifr);  
11.         window.setTimeout(function()\{  
12.             document.body.removeChild(ifr);  
13.         \},3000)  
14.     \};  
15.     document.getElementById(‘openApp’).click();

![save_snippets.png][]

<a href="https://itunes.apple.com/cn/app/id477927812" id="openApp" style="display: none">贴吧客户端</a>
    <script type="text/javascript">
        document.getElementById('openApp').onclick = function(e){
            // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
            // 否则打开a标签的href链接
            var ifr = document.createElement('iframe');
            ifr.src = 'com.baidu.tieba://';
            ifr.style.display = 'none';
            document.body.appendChild(ifr);
            window.setTimeout(function(){
                document.body.removeChild(ifr);
            },3000)
        };
        document.getElementById('openApp').click();

要使用哪一种，就取决与你的实际场景了！

我们在浏览网页的时候，你会看到一个网页下面漂浮着一个提示框“打开APP”或者“下载APP的字样”，如果你的手机已经安装过这个APP，那么网页会提示“打开APP”，如果没有安装，那就会提示“下载APP的字样”  这个从技术角度是如何去实现的呢？下面我给大家分享这块技术，去年公司给国际动漫节做项目的时候，客户就提到这个需求，在点击网页企业的时候 那么直接打开APP（如果已经安装了） 如果没有安装过，直接打开APP页面

下面我把这块的源码分享一下

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> 
    <div>
      38 
    </div> 
    <div>
      39 
    </div> 
    <div>
      40 
    </div> 
    <div>
      41 
    </div> 
    <div>
      42 
    </div> 
    <div>
      43 
    </div> 
    <div>
      44 
    </div> 
    <div>
      45 
    </div> 
    <div>
      46 
    </div> 
    <div>
      47 
    </div> 
    <div>
      48 
    </div> 
    <div>
      49 
    </div> 
    <div>
      50 
    </div> 
    <div>
      51 
    </div> 
    <div>
      52 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>if</code> 
      <code> (navigator.userAgent.match(/android/i)) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 否则打开a标签的href链接</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var isInstalled;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//下面是安卓端APP接口调用的地址，自己根据情况去修改</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var ifrSrc =&nbsp;</code> 
      <code>'<a rel="nofollow">cartooncomicsshowtwo://platformapi/startApp?</a>&nbsp;type=0&amp;id=${com.id}&amp;amp;phone_num=${com.phone_num}'</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var ifr = document.createElement(</code> 
      <code>'iframe'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ifr.src = ifrSrc;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ifr.style.display =&nbsp;</code> 
      <code>'none'</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ifr.onload = function() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// alert('Is installed.');</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>isInstalled =&nbsp;</code> 
      <code>true</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(isInstalled);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>document.getElementById(</code> 
      <code>'openApp0'</code> 
      <code>).click();};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ifr.onerror = function() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// alert('May be not installed.');</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>isInstalled =&nbsp;</code> 
      <code>false</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(isInstalled);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>document.body.appendChild(ifr);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>setTimeout(function() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>document.body.removeChild(ifr);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
      <code>1000</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>//ios判断</code> 
     </div> 
     <div> 
      <code>if</code> 
      <code> (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code> (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) &nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//<a rel="nofollow">Animation://com.yz.animation</a></code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var isInstalled;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//var gz = '{"comName":"${com.short_name}","comID":"${com.id}","comPhoneNum":"${com.phone_num}","type":"0"}';</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//var jsongz =JSON.parse(gz);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//下面是IOS调用的地址，自己根据情况去修改</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var ifrSrc =&nbsp;</code> 
      <code>'<a rel="nofollow">Animation://?comName=</a>${com.short_name}&amp;amp;comID=${com.id}&amp;comPhoneNum=${com.phone_num}&amp;type=0'</code> 
      <code>;var ifr = document.createElement(</code> 
      <code>'iframe'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ifr.src = ifrSrc;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ifr.style.display =&nbsp;</code> 
      <code>'none'</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ifr.onload = function() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// alert('Is installed.');</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>isInstalled =&nbsp;</code> 
      <code>true</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(isInstalled);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>document.getElementById(</code> 
      <code>'openApp1'</code> 
      <code>).click();};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ifr.onerror = function() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// alert('May be not installed.');</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>isInstalled =&nbsp;</code> 
      <code>false</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(isInstalled);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>document.body.appendChild(ifr);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>setTimeout(function() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>document.body.removeChild(ifr);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
      <code>1000</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> <p></p></td> 
  </tr> 
 </tbody> 
</table>

大家在做的过程中需要注意两个问题：

1、接口地址一定要写对，大家可以查一下schema协议，通过这个协议调用的

2、在做用安卓的时候  如果用微信扫一扫或者ＱＱ浏览器扫码功能的时候

使用上面的协议会存在问题的就是必须用ＡＰＫ上架到腾讯应用市场上去

源码下载地址：http://download.csdn.net/detail/wangliang198901/8695049

转载请注明：[Android开发中文站][Android] » [JS检测APP是否安装的情况][JS_APP]

http://www.androidchina.net/2435.html

[iOS]: http://lib.csdn.net/base/ios
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/545958
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/545958/fork
[save_snippets_01.png]: /images/20220705/73319c7cb3d444aa9e37b3856587e0cf.png
[Link 1]: http://lib.csdn.net/base/wechat
[save_snippets.png]: /images/20220705/0006f53d58d14582a4241fc9c63fb93c.png
[Android]: http://www.androidchina.net/
[JS_APP]: http://www.androidchina.net/2435.html