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>
  • 相关阅读:
    数据库_连接查询
    日志
    日常小技巧
    『转载』OpenLayers 5 使用turf.js渲染克里金插值计算的等值面
    Openlayers3中如何优雅的表示等值面
    远程桌面拷贝超大文件
    turf.js intersect()裁剪存在空洞
    web worker示例demo
    meta标签作用
    geojson 标准格式学习
  • 原文地址:https://www.cnblogs.com/h--d/p/5846675.html
Copyright © 2011-2022 走看看