0

0

javascript - 在移动端浏览器内判断用户是否安装了某个app

php中文网

php中文网

发布时间:2016-06-06 20:16:48

|

3076人浏览过

|

来源于php中文网

原创

现页面上有一个“立即打开”按钮,如果用户已经安装了app,则调用相应的app打开,否则跳转到下载页。

已知app的scheme

网上找到的方法1:
$(document).ready(function () {
    var log = function (msg) {
        $('body').before('
' + msg + '
'); }; var timeout, t = 1000, hasApp = true; setTimeout(function () { if (hasApp) { log('安装了app'); } else { log('未安装app'); } }, 2000); function testApp() { var t1 = Date.now(); var ifr = $(''); ifr.attr('src', 'diaodiao://'); $('body').append(ifr); // 插入之后,过1000ms执行try_to_open_app方法 timeout = setTimeout(function () { try_to_open_app(t1); }, t); } function try_to_open_app(t1) { var t2 = Date.now(); if (!t1 || t2 - t1 < t + 200) { hasApp = false; } } testApp(); });

方法1并不起作用,页面上打的log永远都是“未安装app”

网上找的方法2:

window.onload = function(){
    function isInstalled(){
        var originHref = location.href;
        var url = originHref.substring(originHref.indexOf('//')+2);
        var schemeUrl = "diaodiao://"+url;
        window.location=schemeUrl;//打开某手机上的某个app应用
        setTimeout(function(){
            window.location="http://a.app.qq.com/o/simple.jsp?pkgname=com.diaox2.android&ckey=CK1308661595241";//如果超时就跳转到app下载页
        },20000);
    }
    var downlink = document.querySelector('.downlink');
    downlink.addEventListener('click',function(){
        isInstalled();
    },false)
}

此方法的问题在于,window.location=schemeUrl;这句代码执行之后,safari弹出一个对话框,问要不要使用相应的app打开,然后紧接着就跳转到了下载链接(不是定时了么?不知道为什么定时器不起作用?)

立即学习Java免费学习笔记(深入)”;

Songtell
Songtell

Songtell是第一个人工智能生成的歌曲含义库

下载

-----------------new-------------------

上面2种方法肯定有其适用的时期,这些至少是1年多之前的解决办法了,
随着IOS/Android系统及浏览器的更新,现在已经不适用。。


使用iframe呼起app,我在IOS8.3下的safari中是可以呼起的,但是在9.2.1下的safari是不可以的。

在Android5.0.1下测试也通不过,只有在Android Chrome下才能呼起。。

遇到一个跟我问题想似的哥们儿,但是貌似没有很好的回答
ios9下在浏览器中通过scheme打开app的问题
-----------------new-------------------

终于解决了(虽然不那么优雅,没有覆盖所有浏览器或webview),写了一份文档:
关于在浏览器中判断是否安装app

同时,谢谢各位不吝赐教!

回复内容:

现页面上有一个“立即打开”按钮,如果用户已经安装了app,则调用相应的app打开,否则跳转到下载页。

已知app的scheme

网上找到的方法1:
$(document).ready(function () {
    var log = function (msg) {
        $('body').before('
' + msg + '
'); }; var timeout, t = 1000, hasApp = true; setTimeout(function () { if (hasApp) { log('安装了app'); } else { log('未安装app'); } }, 2000); function testApp() { var t1 = Date.now(); var ifr = $(''); ifr.attr('src', 'diaodiao://'); $('body').append(ifr); // 插入之后,过1000ms执行try_to_open_app方法 timeout = setTimeout(function () { try_to_open_app(t1); }, t); } function try_to_open_app(t1) { var t2 = Date.now(); if (!t1 || t2 - t1 < t + 200) { hasApp = false; } } testApp(); });

方法1并不起作用,页面上打的log永远都是“未安装app”

网上找的方法2:

window.onload = function(){
    function isInstalled(){
        var originHref = location.href;
        var url = originHref.substring(originHref.indexOf('//')+2);
        var schemeUrl = "diaodiao://"+url;
        window.location=schemeUrl;//打开某手机上的某个app应用
        setTimeout(function(){
            window.location="http://a.app.qq.com/o/simple.jsp?pkgname=com.diaox2.android&ckey=CK1308661595241";//如果超时就跳转到app下载页
        },20000);
    }
    var downlink = document.querySelector('.downlink');
    downlink.addEventListener('click',function(){
        isInstalled();
    },false)
}

此方法的问题在于,window.location=schemeUrl;这句代码执行之后,safari弹出一个对话框,问要不要使用相应的app打开,然后紧接着就跳转到了下载链接(不是定时了么?不知道为什么定时器不起作用?)

立即学习Java免费学习笔记(深入)”;

-----------------new-------------------

上面2种方法肯定有其适用的时期,这些至少是1年多之前的解决办法了,
随着IOS/Android系统及浏览器的更新,现在已经不适用。。


使用iframe呼起app,我在IOS8.3下的safari中是可以呼起的,但是在9.2.1下的safari是不可以的。

在Android5.0.1下测试也通不过,只有在Android Chrome下才能呼起。。

遇到一个跟我问题想似的哥们儿,但是貌似没有很好的回答
ios9下在浏览器中通过scheme打开app的问题
-----------------new-------------------

终于解决了(虽然不那么优雅,没有覆盖所有浏览器或webview),写了一份文档:
关于在浏览器中判断是否安装app

同时,谢谢各位不吝赐教!

话说好像是这样,ios下面通常用iframe来打开你的scheme地址; Android下通常用location.href来。。。
不过实际情况好像比这个复杂得多。。。。
楼主可以参考下这个:http://js.40017.cn/touch/hb/p/openApp.js

暂时没有测试
先提出一个有可能的解决方案。

异步的请求一下scheme,获取状态码。(如果scheme有状态码则成立的解决方案)

或者可以直接忽略是否正常打开了app

用iframe来尝试打开scheme uri,不管成不成功,都显示一个前往下载app

麻烦问下,你写的
setTimeout(function () {

var timeOutDateTime = new Date();
if (!loadDateTime || timeOutDateTime - loadDateTime < 1010) {
   window.location = self.dataset.href;
}        

},1000);
window.location = 'diaodiao://';

loadDateTime 在哪定义呢,有完整的吗?

大概说一下iOS9吧,
最近刚把自己的webapp用phonegap打了个包,然后要判断手机上是不是装了这个app,如果装了的话,要能从内容页直接跳进app中,而且,需求是不能看见那个alert框。
在iOS9下是ok的,只要有一个apple那边可以认可的https的连接就好。关键词是 Universal Link.网易新闻用的就是这种方式,测试之后,基本能达到判断的需求。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

29

2025.12.25

错误代码dns_probe_possible
错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法,阅读专题下面的文章了解更多处理方案。

20

2025.12.25

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

37

2025.12.25

word转换成ppt教程大全
word转换成ppt教程大全

本专题整合了word转换成ppt教程,阅读专题下面的文章了解更多详细操作。

6

2025.12.25

msvcp140.dll丢失相关教程
msvcp140.dll丢失相关教程

本专题整合了msvcp140.dll丢失相关解决方法,阅读专题下面的文章了解更多详细操作。

2

2025.12.25

笔记本电脑卡反应很慢处理方法汇总
笔记本电脑卡反应很慢处理方法汇总

本专题整合了笔记本电脑卡反应慢解决方法,阅读专题下面的文章了解更多详细内容。

6

2025.12.25

微信调黑色模式教程
微信调黑色模式教程

本专题整合了微信调黑色模式教程,阅读下面的文章了解更多详细内容。

5

2025.12.25

ps入门教程
ps入门教程

本专题整合了ps相关教程,阅读下面的文章了解更多详细内容。

4

2025.12.25

苹果官网入口直接访问
苹果官网入口直接访问

苹果官网直接访问入口是https://www.apple.com/cn/,该页面具备0.8秒首屏渲染、HTTP/3与Brotli加速、WebP+AVIF双格式图片、免登录浏览全参数等特性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

218

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 1.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号