在浏览器中打开手机app

原创 2016年08月31日 10:57:00

在浏览器中打开手机APP 如果手机中没有安装则跳转到下载页面
其实不管用户有没有安装App 最终都会跳转到App下载页,因为判断不了用户是否安装App,只能是每次尝试去打开 不管成功或者失败都会到下载界面

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>打开手机app</title>
    <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
</head>
<body>
<div>
    <a id="call_app" href="javascript:;" class="label">立即打开&gt;&gt;</a>
</div>

<script>

        var u = navigator.userAgent;
        //android终端
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
        //ios终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);


        var config = {
            /**scheme:必须*/
            scheme_IOS:'yuancios://',
            /** yuancandroid  这个必须全部小写*/
            scheme_Adr: 'yuancandroid://splash',
            download_url_ios: 'ios下载地址',
            download_url_adr: 'android下载地址',
            timeout: 600
        };

        var openApp = function () {
            //ios9不支持iframe 所以直接用href跳转,不过这种方式并不完美
            //ios 手机如果没有安装要打开的app 会弹窗提示链接无效 不太友好
            //不过苹果官方好像出了一个通用链接的方式处理 有需要的可以去百度一下这种实现方式

            //所以用两个定时器 而如果跳应用失败 会打开下载链接
            //reload 并不会打断 App Store 的跳转。
            if (isiOS) {
                location.href = config.scheme_IOS;
                setTimeout(function () {
                    location.href = config.download_url_ios;
                }, config.timeout + 900);
                setTimeout(function () {
                    location.reload();
                }, config.timeout + 1400);

            } else if (isAndroid) {

                //如果安卓有浏览器不支持iframe 可以判断浏览器类型然后用
                // window.location.href 直接跳转 这种方式处理
                var ifr = document.createElement('iframe');
                ifr.src =  config.scheme_Adr;
                ifr.style.display = 'none';
                document.body.appendChild(ifr);

                setTimeout(function () {
                    location.href = config.download_url_adr;
                }, config.timeout + 400);

            }
        };
        document.getElementById("call_app").addEventListener('click', openApp, false);


</script>

</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

手机浏览器打开手机上某个APP及注意事项

手机浏览器打开手机上某个APP及注意事项
  • u014620028
  • u014620028
  • 2016年07月22日 11:04
  • 4935

手机浏览器下判断是否安装某app,并判断是否打开该应用

今天在做前端输出的时候,需要和app的做些对接工作。就是在手机浏览器中下载某app时,能判断该用户是否安装了该应用。如果安装了该应用,就直接打开该应用;如果没有安装该应用,就下载该应用。那么下面就对在...
  • pjk1129
  • pjk1129
  • 2015年04月10日 17:44
  • 25260

js 通过浏览器直接打开应用程序(IOS,Android)

实现效果如下图所示,在手机浏览器中访问京东的手机版网站(m.jd.com),顶部会有一个广告图,点击这个广告图,如果手机上已经安装了京东App,则直接打开,如果没有安装,则开始下载。实现方式1.为An...
  • qilixiang012
  • qilixiang012
  • 2015年07月15日 10:00
  • 4642

android实现通过浏览器点击链接打开本地应用(APP)并拿到浏览器传递的数据

 为了实现这个功能可折腾了我好久,先上一份代码,经楼主验证是绝对可以用的而且也比较清晰的代码!(ps:还是先剧透下吧,第三方大部分浏览器无法成功。) 点击浏览器中的URL链接,启动特定...
  • suyan_why
  • suyan_why
  • 2016年09月22日 13:54
  • 1716

Android实现通过浏览器点击链接打开本地应用(APP)并拿到浏览器传递的数据

jintian 为了实现这个功能可折腾了我好久,先上一份代码,经楼主验证是绝对可以用的而且也比较清晰的代码!(ps:还是先剧透下吧,第三方大部分浏览器无法成功。) 点击浏览器中的URL链接,启...
  • jiangwei0910410003
  • jiangwei0910410003
  • 2014年04月17日 16:15
  • 81402

JS唤醒Android APP(包括在外部浏览器和WebView)

1.AndroiManifest.xml中配置 请在App启动的第一个Activity的那个节点中加入 intent-filter> action android:name="androi...
  • pengpenggxp
  • pengpenggxp
  • 2016年11月22日 16:55
  • 2622

通过浏览器直接打开Android应用程序

转载:https://github.com/cundong/blog/blob/master/%E9%80%9A%E8%BF%87%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9B%B...
  • a457886115
  • a457886115
  • 2016年08月04日 16:15
  • 1368

android实现程序启动直接调用系统默认浏览器

最近找了个单位实习,一直比较忙,没啥时间学习android,因为企业是起步阶段做网上商城–>www.yuanxinco.com 老板不是做技术的,他想弄个APP,说只要打开这个软件可以直接跳到网页就...
  • qq_31568297
  • qq_31568297
  • 2016年03月31日 14:28
  • 2074

手机浏览器下怎么打开app应用

今天在做前端输出的时候,需要和app的做些对接工作。就是在手机浏览器中下载某app时,能判断该用户是否安装了该应用。如果安装了该应用,就直接打开该应用;如果没有安装该应用,就下载该应用。那么下面就对在...
  • y2010081134
  • y2010081134
  • 2015年07月13日 22:24
  • 2605

手机浏览器下怎么打开app应用

手机浏览器下怎么打开app应用 http://m.blog.csdn.net/y2010081134/article/details/46868675 发表于2015/7/13 22:24:07 ...
  • tropicofcancer9
  • tropicofcancer9
  • 2017年07月11日 11:30
  • 103
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在浏览器中打开手机app
举报原因:
原因补充:

(最多只允许输入30个字)