zoukankan      html  css  js  c++  java
  • 【JS】点击页面判断是否安装app并打开,否则跳转下载的方法

    应用场景

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

    解决办法

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

     1 <!-- a标签点击打开的动作,在click事件中注册 -->
     2 <a href="javascript:;" id="openApp">贴吧客户端</a>
     3 <script type="text/javascript">
     4     document.getElementById('openApp').onclick = function(e){
     5         // 通过iframe的方式试图打开APP,如果能正常打开,会直接切换到APP,并自动阻止js其他行为
     6         
     7         var ifr = document.createElement('iframe');
     8         ifr.src = 'com.baidu.tieba://';//打开app的协议,有app同事提供
     9         ifr.style.display = 'none';
    10         document.body.appendChild(ifr);
    11         window.setTimeout(function(){
    12             document.body.removeChild(ifr);
    13        window.location.href = "https://itunes.apple.com/cn/app/id477927812";//打开app下载地址,有app同事提供
    14         },2000)
    15     };
    16 </script>

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

    1 <a href="javascript:;" id="openApp">贴吧客户端</a>
    2 <script type="text/javascript">
    3     document.getElementById('openApp').onclick = function(e){
    4         window.location.href = "com.baidu.tieba://";
    5         window.setTimeout(function(){
    6             window.location.href = "https://itunes.apple.com/cn/app/id477927812";//打开app下载地址,有app同事提供
    7         },2000)
    8     };
    9 </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'>

      百度贴吧的

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

     测试Demo

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     5 <title>this's a demo</title>
     6     <meta name='apple-itunes-app' content='app-id=477927812'>
     7 </head>
     8 <body>
     9     <a href="javascript:;" id="openApp">贴吧客户端</a>
    10 </body>
    11 </html>
    12 <script type="text/javascript">
    13     document.getElementById('openApp').onclick = function(e){
    14         
    15         if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))
    16            {
    17             window.location.href = "com.baidu.tieba://";//ios app协议
    18             window.setTimeout(function() {
    19                 window.location.href = "https://itunes.apple.com/cn/app/id477927812";
    20             }, 2000)
    21            }
    22         if(navigator.userAgent.match(/android/i))
    23         {
    24             window.location.href = "com.baidu.tieba://app";//android app协议
    25             window.setTimeout(function() {
    26                 window.location.href = "https://****.apk";//android 下载地址
    27             }, 2000)    
    28         }
    29     };
    30 </script>
  • 相关阅读:
    開始Unity3D的学习之旅
    提供一个免费的CSDN下载账号
    SIP入门(二):建立SIPserver
    设计模式之6大原则(6)开闭原则
    怎样利用App打造自明星实现自盈利
    BackTrack5 (BT5)无线password破解教程之WPA/WPA2-PSK型无线password破解
    机房收费重构——关于面向对象和分层的纠结
    JAVA反射机制
    php实现工厂模式
    freemarker中的round、floor和ceiling数字的舍入处理
  • 原文地址:https://www.cnblogs.com/h--d/p/5846675.html
Copyright © 2011-2022 走看看