【JS】点击页面判断是否安装app并打开,否则跳转下载的方法

时间：2023-03-09 00:26:13
【JS】点击页面判断是否安装app并打开,否则跳转下载的方法

应用场景

　　App产品在运营推广上有一个需求，就是要求可以让用户在访问我们的推广网页时，就可以判断出这个用户手机上是否安装了我们的App，如果安装了则可以直接在网页上打开，否则就引导用户前往下载。从而形成一个推广上的闭环。

解决办法

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

 <!-- a标签点击打开的动作，在click事件中注册 -->

 <a href="javascript:;" id="openApp">贴吧客户端</a>

 <script type="text/javascript">

     document.getElementById('openApp').onclick = function(e){

         // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止js其他行为

         var ifr = document.createElement('iframe');

         ifr.src = 'com.baidu.tieba://';//打开app的协议，有app同事提供

         ifr.style.display = 'none';

         document.body.appendChild(ifr);

         window.setTimeout(function(){

             document.body.removeChild(ifr);

 　　　　　　　window.location.href = "https://itunes.apple.com/cn/app/id477927812";//打开app下载地址，有app同事提供

         },2000)

     };

 </script>

此方法有些浏览器不兼容iframe，可以window.location的方法解决

 <a href="javascript:;" id="openApp">贴吧客户端</a>

 <script type="text/javascript">

     document.getElementById('openApp').onclick = function(e){

         window.location.href = "com.baidu.tieba://";

         window.setTimeout(function(){

             window.location.href = "https://itunes.apple.com/cn/app/id477927812";//打开app下载地址，有app同事提供

         },2000)

     };

 </script>

IOS上的Banner

　　参考网页：https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

　　应用场景：

　　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

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

　　　　<meta name='apple-itunes-app' content='app-id=你的APP-ID'>

　　百度贴吧的

 <meta name='apple-itunes-app' content='app-id=477927812'>

测试Demo

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>this's a demo</title>

     <meta name='apple-itunes-app' content='app-id=477927812'>

 </head>

 <body>

     <a href="javascript:;" id="openApp">贴吧客户端</a>

 </body>

 </html>

 <script type="text/javascript">

     document.getElementById('openApp').onclick = function(e){

         if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))

            {

             window.location.href = "com.baidu.tieba://";//ios app协议

             window.setTimeout(function() {

                 window.location.href = "https://itunes.apple.com/cn/app/id477927812";

             }, 2000)

            }

         if(navigator.userAgent.match(/android/i))

         {

             window.location.href = "com.baidu.tieba://app";//android app协议

             window.setTimeout(function() {

                 window.location.href = "https://****.apk";//android 下载地址

             }, 2000)

         }

     };

 </script>

相关文章