H5页面判断客户端是iOS或者Android并跳转对应链接唤起APP

判断客户端

每个客户端都会有自己的 UA (userAgent)标识,可以用 JavaScript 获取客户端标识。

用正则来判断手机是 iOS(苹果)还是 Android(安卓)客户端。代码如下:

<script type="text/javascript">
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //Android
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //iOS
    alert('是否是Android:'+isAndroid);
    alert('是否是iOS:'+isiOS);
</script>

浏览器检查

可以检查是否是移动端(Mobile)、iPad、iPhone、微信、QQ等。

通过判断是否是微信,部分不能用微信打开的页面,可以设置一个引导提示,让用户在浏览器中打开。 

方法一:

<script type="text/javascript">
    //判断终端
    var browser={
        versions:function(){
            var u = navigator.userAgent, app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //iOS终端
                android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //Android终端
                iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
                weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
                qq: u.match(/\sQQ/i) == " qq" //是否QQ
            };
        }(),
        language:(navigator.browserLanguage || navigator.language).toLowerCase()
    }
</script>

使用方法:

//判断是否IE内核
if (browser.versions.trident) {
    alert("is IE");
}
//判断是否webKit内核
if (browser.versions.webKit) {
    alert("is webKit");
}
//判断是否移动端
if (browser.versions.mobile || browser.versions.android || browser.versions.ios) {
    alert("移动端");
}

检测浏览器语言:

currentLang = navigator.language;   //判断除IE外其他浏览器使用语言
if(!currentLang){//判断IE浏览器使用语言
    currentLang = navigator.browserLanguage;
}
alert(currentLang);

方法二:

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent);  
    window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent); 
    window.location.href ="Android.html";
} else {
    window.location.href ="pc.html";
};

判断iOS/Android跳转相对链接

在H5等移动端页面上,经常会用到一个引导页面,点击按钮跳转下载链接。通常页面会自动判断手机,iOS跳转AppStore,Android直接跳转下载链接或者对应的应用商店页面。

通过上面的讲解,大家会发现,该功能其实也不难实现,代码如下(以微信为例):

function downApp(){
    var u = navigator.userAgent,
        isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
        isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
        urls = {
            'android':'http://dldir1.qq.com/weixin/android/weixin704android1420.apk',
            'ios':'https://itunes.apple.com/cn/app/wei/id414478124',
            'other':'http://weixin.qq.com/d'
        };
    //三元运算
    // window.location.href = isAndroid? urls.android : isiOS? urls.ios : urls.other;
    //简化
    if(isAndroid){
        window.location.href=urls.android;
    }else if(isiOS){
        window.location.href=urls.ios;
    }else{
        window.location.href=urls.other;
    }
}
downApp();

可以直接把这个函数放在一个按钮或者链接上,点击触发这个事件。就能实现js点击跳转到适合手机的设备了。

例如:

<a href="javascript:void(0)" onclick="downApp()">点击下载应用</a>

唤起本地APP

在日常生活中,应该不难遇到打开页面自动跳转到APP的提示,有以下几种实现方案:

因为 iOS9 和之前的 iOS 系统有区别,所以这里我们也要区别对待。

iOS7/iOS8

iOS 中默认通过 Safari 打开 URL scheme ,方法一般有如下两种:

直跳方式:

点击链接、修改 window.location 等。

<a href="schemeUrl">唤醒APP</a>

或者:


window.location.href = schemeUrl;

iframe 方式:

直跳方式中,如果APP唤醒失败或者未安装,很多时候都会跳到错误页,很影响用户体验,我们可以做一个判断,若APP跳转失败则转到一个友好页面(如下载页面)。

该方法不会引起页面可见的变化(例如页面内容变成一个新页面),不会导致浏览器历史记录的变化,大致实现如下:

在 body 上添加 iframe,设置 src 属性为跳转的 URL scheme 。

<a href="APP下载地址">下载或打开APP</a>
<script>
$('a').click(function() {
    var ifr = document.createElement('iframe');
    ifr.src = '自定义 URL scheme';
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    setTimeout(function(){
        document.body.removeChild(ifr);
    }, 3000);
});
</script>

过程是这样:点击 a 标签时,首先会尝试打开 URL scheme ,如果成功,就唤起APP;如果失败,则跳转到 href 属性,即下载页。

Android

// 延后50毫秒
setTimeout(function() {
    location.href = ‘自定义 URL’
}, 50)

如果设置比较小的运行间隔(<30ms),在浏览器或者webview中,应用切换到后台,setInterval会被很明显的延迟执行,比如设置一个运行间隔20ms,总计运行100次的定时器,如果页面一直处于前台,则100次跑完,总耗时与 100x20=2000ms不会有太大差异,但页面在后台运行时,此时间会明显超过2000ms。可以利用这一点来实现是否成功打开APP检测及回调。

function openApp(openUrl, appUrl, action, callback) {    //检查app是否打开
    function checkOpen(cb) {
        var _clickTime = +(new Date());

        function check(elsTime) {
            if (elsTime > 3000 || document.hidden || document.webkitHidden) {
                cb(1);
            } else {
                cb(0);
            }
        }        //启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束
        var _count = 0, intHandle;
        intHandle = setInterval(function () {
            _count++;
            var elsTime = +(new Date()) - _clickTime;
            if (_count >= 100 || elsTime > 3000) {
                clearInterval(intHandle);
                check(elsTime);
            }
        }, 20);
    }

    //在iframe 中打开APP
    var ifr = document.createElement('iframe');
    ifr.src = openUrl;
    ifr.style.display = 'none';
    if (callback) {
        checkOpen(function (opened) {
            callback && callback(opened);
        });
    }
    document.body.appendChild(ifr);
    setTimeout(function () {
        document.body.removeChild(ifr);
    }, 2000);
}

另外,可以通过 document.hidden 或 document.[webkit|moz|ms]Hidden 来判断页面是否被置入后台(即应用被唤起),或 visibilitychange 事件,但对于Android 4.4版本一下则不支持。

iOS9

在 iOS 9 上,iframe 方案不可用。

按不能使用之前Android的代码,因为在打开自定义 URL scheme 时,会弹出对话框,询问是否用 xx 应用来打开。往往用户还没来得及点击打开,定时器又触发了,导致跳到 App Store。

可以在尝试打开URL scheme 后,再加一个页面跳转,这样对话框会被覆盖,再刷新页面,就能无需确认唤起APP:

$('a').click(function() {
    location.href = '自定义 URL scheme';
    location.href = '下载页';
    location.reload();
}

这里,下载页延时 2 秒跳转到 App Store。

APP已安装这是没问题的,但如果APP未安装,跳 App Store 的请求会失败。

这时可以使用两个定时器:

$('a').click(function() {
    location.href = '自定义 URL scheme';
    setTimeout(function() {
        location.href = '下载页';
    }, 250);
    setTimeout(function() {
        location.reload();
    }, 1000);
}

不过在iOS9中其实是支持universal link的,就是一个http域名形式,在微信中都可以唤起APP。如果未安装的话,可以直接引导用户去APP store下载。

计算时差的方案打开APP

var checkOpen = function (cb){
    var _clickTime = +(new Date());
    function check(elsTime) {
        if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
            cb(1);
        } else {
            cb(0);
        }
    }
    //启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束
    var _count = 0, intHandle;
    intHandle = setInterval(function(){
        _count++;
        var elsTime = +(new Date()) - _clickTime;
        if (_count>=100 || elsTime > 3000 ) {
            clearInterval(intHandle);
            check(elsTime);
        }
    }, 20);
}
checkOpen(function(opened){
    // APP没有打开成功  并且开启自动跳转到下载页
    if(opened === 0 && option.autoRedirectToDownloadUrl){
        location.href = downloadUrl;
    }
});

另一种方法,iOS会有弹窗

$("a[href^='schema://']").on('click',function(e){
    e.preventDefault();
    if(isWeixinBrowser() || isQQBrowser()){
        $('.layer').show(); //友好的提示页面
    }else{
        if(isAndroid){
            //android
            
            //此操作会调起app并阻止接下来的js执行
            $('body').append("<iframe src='schema://openapp' style='display:none' target='' ></iframe>");

            //没有安装应用会执行下面的语句
            setTimeout(function(){window.location = 'http://www.yourdlurl.com/download.html'},600);
        }else{
            //ios
            window.location = 'schema://openapp';
            setTimeout(function(){window.location = 'itms-apps://itunes.apple.com/app/idXXXXXXX'},25);
        }
    }
})

function isWeixinBrowser() {
        return (/micromessenger/.test(ua)) ? true : false;
    }

function isQQBrowser() {
    return (ua.match(/QQ/i) == "qq") ? true : false;
}


推荐阅读:

PhpStorm表单提交时获取不到post数据的解决方法

jquery导航栏点击及页面跳转后对应栏目添加选中效果

新网站如何做好SEO优化 尽快被收录

WDLinux故障 Linux系统网站数据备份笔记

jQuery实现本地input选择图片实时显示

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)