2023年12月14日发(作者：)

手机浏览器通过Scheme跳转APP，兼容各种手机浏览器

　一个比较完整的产品线，必定有APP和网站，另外还有微信公众号网页和小程序。那么有一个比较常见的需求就是在手机浏览器内打开

APP，实现起来也比较简单，只要APP配置的有URLScheme即可。但是因为无法判断是否安装APP，所有只能尝试去打开APP，如果打

不开则跳转到APP下载页面。另外手机浏览器的类型很多，各个浏览器显示的效果也不一样，一直无法找到一个完全兼容所有浏览器的方

法，没有完美的解决方案。

　　打开APP的操作就是链接打开 = "scheme://"，APP未安装的时候链接打开有的时候会跳转到错误页面，所以可以使用

iframe来跳转，保证浏览器链接一直在当前页面 elector("#iframeId").src = "scheme://"，打开APP大部分手机浏览

器会弹窗是否允许跳转打开。

测试了流行的几个手机浏览器，总结一下需要注意以下几点：

　　2. 安卓下的谷歌浏览器无法通过iframe的方式打开，必需使用。

　　3. 手机百度浏览器不支持打开APP，这个是百度自己的问题，不允许打开APP。另外百度浏览器中页面的按钮文字含有“下

载”或“打开”的时候，按钮会被百度给隐藏掉（好霸道），所以只能换下文字或者加空格“下 载”“打 开”。

　　4. UC浏览器页面初始化后直接通过js打开APP打开不了，需要点击实际的按钮触发打开。

最终实现的方式如下：

1. 通过js判断浏览器类型　

　var Navigator = ent;

　　var ifChrome = (/Chrome/i) != null && (/Versiond+.d+(.d+)?sChrome/i) == null ? true : false; //判断是不是谷歌浏览器

　　var ifAndroid = ((/(Android);?[s]+([d.]+)?/)) ? true : false; //判断是不是安卓

　　var ifIos = /(iPhone|iPad|iPod|iOS)/(Navigator); //判断是不是ios

　　var ifUCorBaidu = /(UCBrowser|baiduboxapp)/(Navigator); //判断是不是UC或百度浏览器

　　var openUrl = "scheme://";

　　var androidDownUrl = "xxx/";

　　var iosDownUrl = "/cn/app/要跳转的APP的appid";

2. 分别操作

{{text}}

if(ifUCorBaidu) {

　　 = '点 击 下 载 APP';

} else {

　　 = '正在跳转中';

　　openApp();

} //这里使用了vue，也可以用其他方式修改按钮文字

function openApp() {

= function() {

　　if(myTimeout) {

　　　　clearTimeout(myTimeout);

　　}

}; //onblur可以检测到页面消失，这时候一般已经打开了APP，就清除掉下载定时器，不跳出下载链接。

if (ifIos) {

　　if(ifUCorBaidu) {

　　　　 = iosDownUrl; //ios跳到App Store也可以打开APP，所以直接打开就好了。

　　} else {

　　　　 = openUrl;

　　　　var myTimeout = setTimeout(function () {

　　　　　　 = iosDownUrl;

　　　　}, 1000);

　　} else{

　　　　if(ifChrome && ifAndroid) {

　　　　　　setTimeout(function() {

　　　　　　　　 = openUrl;

　　　　　　}, 50)

　　　　} else {

　　　　　　elector("#myDown").src = openUrl;

　　　　}

　　　　var loadDateTime = ();

　　　　setTimeout(function() {

　　　　　　var myTimeout = setTimeout(function() {

　　　　　　var timeOutDateTime = ();

　　　　　　if (loadDateTime && (timeOutDateTime - loadDateTime) < (1500 + 200)) {

　　　　　　　　　　 = androidDownUrl

　　　　　　　　} //这里的操作跟直接setTimeout是一样的

　　　　　　}, 1500);

　　　　}, 100)

　　}

}

}

经过测试 百度浏览器，QQ浏览器，UC浏览器，360浏览器，搜狗浏览器，夸克浏览器，Safari浏览器效果都还算理想。