html5唤起app的办法--百分百源码网

html5唤起app的办法-

发布时间：08/01 来源：未知浏览：关键词：

h5唤起app这种需求是常见的。在挪移为王的时期，h5在app导流上发挥着重要的作用。当前我们采纳的唤起方式是urlscheme(iOS，Android平台都支撑)，只需原生APP开发时注册scheme，那么会员点击到此类链接时，会主动跳到APP。 h5唤起app这种需求是常见的。在挪移为王的时期，h5在app导流上发挥着重要的作用。当前我们采纳的唤起方式是url scheme(iOS，Android平台都支撑)，只需原生APP开发时注册scheme，那么会员点击到此类链接时，会主动跳到APP。

三种唤起方案

iframe

var last = Date.now(),
    doc = window.document,
    ifr = doc.createElement('iframe');

//新建一个隐蔽的iframe
ifr.src = nativeUrl;
ifr.style.cssText = 'display:none;border:0;width:0;height:0;';
doc.body.appendChild(ifr);

setTimeout(function() {
    doc.body.removeChild(ifr);
    //setTimeout回小于2000个别为唤起失败 
    if (Date.now() - last < 2000) {
        if (typeof onFail == 'function') {
            onFail();
        } else {
            //弹窗提示或下载处理等
        }
    } else {
        if (typeof onSuccess == 'function') {
            onSuccess();
        }
    }
}, 1000);

iframe方案的唤起道理是: 程序切换到后台时，计时器会被延迟(计时器不准的又一种状况)。要是app被叫醒那么网页必定就进入了后台，要是会员从app切回归，那么工夫个别会超过2s;若app没有被唤起，那么网页不会进入后台，setTimeout根本准时触发，那么工夫不会超过2s。

window.location.href直接跳转

window.location.href = nativeUrl;

a标签唤起

唤起app

三种唤起方案的阅读器测试

X表示唤起失败，√表示唤起成功
红色标志表示进入页面直接唤起，绿色表示人工事件操纵后唤起
ios测试机:苹果 6p;android测试机:XIAOMI1s

iframe唤起app测试效果

测试效果剖析

第一测试的机型和阅读器有限，上述效果仅作参照 .

对照iframe唤起和location.href，我们可以发明：

关于ios来说，location.href跳转更合适，由于这种方式可以在Safari中成功唤起app。Safari作为苹果默许阅读器其重要性就不消多说了，而关于微信和qq客户端，ios中这两种方式都没有什么卵用==
关于Android来说，在进入页面直接唤起的状况下，iframe和location.href是同样的，但是要是是事件驱动的唤起，iframe唤起的体现比location.href要更好一点。
通过测试可以发明，进入页面直接唤起和事件驱动的唤起，关于许多阅读器，两者的体现是不一样的，简略来说，直接唤起的失败更多。

通过上述对照剖析，Android运用iframe唤起，ios采纳window.location.href唤起更合适一点。

进入页面直接唤起和事件驱动唤起的区别

这两种唤起场景在Android中有显明的区别，不管是iframe的方式唤起还是location.href,以XIAOMI1s的chrome为例:

点我打开APP

绑定事件人工驱动唤起：

//成功唤起
window.onload = function () {
    $('#goApp').on("click", function () {
        window.lib.callapp("nativeUrl");//iframe
        //window.location.href = nativeUrl;
    });
};

进入页面直接唤起：

//唤起失败
window.onload = function () {
    window.lib.callapp("nativeUrl");//iframe
    //window.location.href = nativeUrl;
};

绑定事件，js唤起

//唤起失败
window.onload = function () {
    $('#goApp').on("click", function () {
        window.lib.callapp("nativeUrl");//iframe
        //window.location.href = nativeUrl;
    });

    $('#goApp).trigger('click');
};

原本我认为$('#goApp).trigger('click');的方式和人工点击是同样的，而现实体现是，js触发事件的体现和页面直接跳转同样无效。

从参照的博文中看到 Android平台和各个app厂商悬殊很大，比方Chrome从25及今后就不再支撑通过js触发（非会员点击），设定iframe src地址等来触发scheme跳转。所以js触发和直接会员点击区别还是很大的，跟音频播放的限定异途同归吧。

最后

经过上述的测试和剖析，根本敲定ios用window.location.href的方式唤起比拼合适，Android用iframe唤起比拼合适。我们在运用iframe唤起时，个别对唤起失败的处置是直接下载，但是这里就有一个题目，就是阅读器没法检测到唤起可否成功，即，要是我唤起成功后返回阅读器，阅读器还是会弹出下载信息，这个体验很差。固然我们也需要处置一些成功或失败的回调函数，说不定我们的场景只需要唤起而并不需要失败后的下载呢。

对于运用location.href唤起苹果手机上的原生app，跳转中间页的处置方式可能也比目前页直接处置更好一点。

以上内容就是html5唤起app的办法，但愿对大家有帮忙。

打赏