Home >Backend Development >PHP Tutorial >javascript - 在移动端浏览器内判断用户是否安装了某个app

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

WBOY
WBOYOriginal
2016-06-06 20:16:482348browse

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

已知app的scheme

网上找到的方法1:

<code>$(document).ready(function () {
    var log = function (msg) {
        $('body').before('<div class="log">' + msg + '</div>');
    };
    var timeout, t = 1000, hasApp = true;

    setTimeout(function () {
        if (hasApp) {
            log('安装了app');
        } else {
            log('未安装app');
        }
    }, 2000);
    function testApp() {
        var t1 = Date.now();
        var ifr = $('<iframe id="ifr"></iframe>');
        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 </code>

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

网上找的方法2:

<code>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)
}</code>

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

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

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


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

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

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

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

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

回复内容:

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

已知app的scheme

网上找到的方法1:

<code>$(document).ready(function () {
    var log = function (msg) {
        $('body').before('<div class="log">' + msg + '</div>');
    };
    var timeout, t = 1000, hasApp = true;

    setTimeout(function () {
        if (hasApp) {
            log('安装了app');
        } else {
            log('未安装app');
        }
    }, 2000);
    function testApp() {
        var t1 = Date.now();
        var ifr = $('<iframe id="ifr"></iframe>');
        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 </code>

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

网上找的方法2:

<code>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)
}</code>

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

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

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


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

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

遇到一个跟我问题想似的哥们儿,但是貌似没有很好的回答
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 () {

<code>var timeOutDateTime = new Date();
if (!loadDateTime || timeOutDateTime - loadDateTime </code>

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

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

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn