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

判断客户端

每个客户端都会有自己的 UA （userAgent）标识，可以用 JavaScript 获取客户端标识。

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

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

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

使用方法：

检测浏览器语言：

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

通过上面的讲解，大家会发现，该功能其实也不难实现，代码如下（以微信为例）：

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

例如：

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

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

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

直跳方式：

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

或者：

iframe 方式：

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

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

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

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

如果设置比较小的运行间隔（ 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版本一下则不支持。

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

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

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

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

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

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

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

声明：本文由w3h5原创，转载请注明出处：《H5页面判断客户端是iOS或者Android并跳转对应链接唤起APP》 https://www.w3h5.com/post/334.html

(adsbygoogle = window.adsbygoogle || []).push({});