本文介绍通过JS判断手机是否安装App的实现方案。核心原理是利用自定义Scheme协议，若已安装则拦截请求拉起应用，未安装则跳转下载页。针对部分机型即使未安装也会触发定时器的问题，采用iframe创建与移除的时间差判断逻辑，有效解决兼容性问题，确保用户正确跳转。
需求背景与原理
产品提出了一项需求：在手机网页中判断用户是否已安装自家公司的App。若已安装，则直接拉起App；若未安装，则引导用户前往下载页面。
经过多方查阅资料与尝试，总结出一套较为可行的解决方案。
拉起App的核心原理在于JS与原生应用约定统一的地址格式，例如（qiyimobile://self/qiyi.madeindexpage）。当浏览器发起该请求时，若App已安装，系统会拦截此请求并启动App。
Android端配置
以下是Android端的配置代码。需要注意的是，Scheme和Host必须与JS端保持一致。
<span style="font-size:18px;"><intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:scheme="qiyimobile"
android:host="self/qiyi.madeindexpage"
android:pathPrefix="/**">
</data>
</intent-filter></span>JS端实现与兼容性问题
JS端的实现相对复杂。若仅需拉起App，直接通过a标签或设置window.location.href为对应地址即可。但存在一个问题：部分手机在未安装App时，仍会识别之前定义的协议并尝试打开网页，导致报错“找不到网页”。相比之下，使用iframe方式兼容性更好。
var ifr = document.createElement('iframe');
ifr.src = 'qiyimobile://self/qiyi.madeindexpage';
document.body.appendChild(ifr);当手机未安装App时，应跳转至下载页。常见做法是设置延时后直接跳转，代码如下。
window.location.href=“打开地址”
setTimeout(function() {
window.location.href=“下载地址”
}, 500);时间差判断逻辑
然而，这种方法存在缺陷：部分手机在拉起App后不会自动清除定时器。这意味着无论App是否安装，页面都会在500ms后强制跳转至下载页。因此，判断是否需要跳转下载页成为关键难点。最终尝试的方案如下，效果较好。
设置一个初始时间，在尝试打开App地址后记录结束时间，计算两者的差值。若差值大于一定阈值，说明App已成功打开；若差值很小，则说明未打开App，此时应跳转至下载页。
最终实现的代码如下。
downloadapp.addEventListener('click', function() {
var start = new Date();//记录初始时间
var t = 500;
var ifr = document.createElement('iframe');
ifr.src = 'qiyimobile://self/qiyi.madeindexpage';//打开app
document.body.appendChild(ifr);
ifr.onload = function() {
};
ifr.style.display='none';
setTimeout(function() {
document.body.removeChild(ifr);
var end = new Date();//记录结束时间
console.log(end - start)
if (end - start <= (t + 30)) {//两者之差小于30ms时跳转到下载页
window.location.href = "https://www.baidu.com"
}
}, t);
})以上介绍了JS判断App是否安装并拉起或跳转下载页的实现代码，希望对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！