首頁 > 後端開發 > php教程 > javascript - 在移动端浏览器内判断用户是否安装了某个app

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

WBOY
發布: 2016-06-06 20:16:48
原創
2347 人瀏覽過

现页面上有一个“立即打开”按钮,如果用户已经安装了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.网易新闻用的就是这种方式,测试之后,基本能达到判断的需求。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板