在浏览器中打开手机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的做些对接工作。就是在手机浏览器中下载某app时,能判断该用户是否安装了该应用。如果安装了该应用,就直接打开该应用;如果没有安装该应用,就下载该应用。那么下面就对在...

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

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

app-项目开发手机浏览器

  • 2015年06月10日 11:55
  • 21KB
  • 下载

面向未来 手机浏览器Web App路径渐清晰

随着移动互联网的快速发展,手机浏览器市场也变得异常火爆。当HTML5从技术变成标准并逐步成为现实,也激化了基于网页的系统和应用(Web App)与苹果模式的本地系统和应用(Native App)的...

Android开发实践经验谈:如何让各式手机浏览器可以直接下载apk安装文件且实现自动安装APP

[摘要]: 不少人做了Android的APP应用且放在了外网上,但是手机用户通过url找到了apk文件却无法实现下载,也或者下载后无法自动安装。针对这样一些问题今天进行了一个技术性的汇总,希望可以帮到...
  • kaosini
  • kaosini
  • 2014年05月13日 18:06
  • 3383

手机QQ浏览器与Web App开发者共赢

  • 2013年05月28日 19:50
  • 2.55MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在浏览器中打开手机app
举报原因:
原因补充:

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