Comment invoquer une application en HTML5

Il est courant que h5 évoque les besoins des applications. À une époque où le mobile est roi, h5 joue un rôle important dans le détournement du trafic des applications. La méthode d'évocation que nous utilisons actuellement est le schéma d'URL (pris en charge par les plates-formes iOS et Android). Il vous suffit d'enregistrer le schéma lors du développement de l'application native, puis lorsque l'utilisateur clique sur un tel lien, il accède automatiquement à l'application.

Trois schémas d'évocation

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 == &#39;function&#39;) {
            onFail();
        } else {
            //弹窗提示或下载处理等
        }
    } else {
        if (typeof onSuccess == &#39;function&#39;) {
            onSuccess();
        }
    }
}, 1000);

Le principe d'évocation du schéma iframe est le suivant : lorsque le programme passe en arrière-plan, la minuterie être retardé (une autre situation où la minuterie est inexacte). Si l'application est réveillée, la page Web entrera inévitablement en arrière-plan. Si l'utilisateur quitte l'application, le temps dépassera généralement 2 secondes ; si l'application n'est pas réveillée, la page Web n'entrera pas en arrière-plan. setTimeout est essentiellement déclenché. Temps, et le temps ne dépassera pas 2s.

window.location.href saute directement

window.location.href = nativeUrl;

une évocation de tag

<a href="nativeUrl">唤起app</a>

Test par navigateur de trois schémas d'évocation

1. machine de test iOS : iphone 6p ; machine de test Android : Xiaomi 1s

2. iframe évoque les résultats des tests d'application
window.location.href évoque les résultats des tests d'application

une balise évoque les résultats des tests d'application

iframe et window.location .href Evoke comparaison

iframe, window.location.href et un tag évoquent la comparaison

Les modèles et navigateurs testés en premier sont limités, et les résultats ci-dessus sont à titre de référence uniquement.

1. Grâce à des tests, il a été constaté que les performances de l'évocation directe lors de l'entrée dans la page et de l'évocation basée sur les événements sont différentes pour de nombreux navigateurs. En termes simples, l'évocation directe échoue plus souvent.

2. Grâce à l'analyse comparative ci-dessus, il est plus approprié d'utiliser iframe pour évoquer sur Android et window.location.href sur iOS.
3. La différence entre l'évocation directe à la saisie de la page et l'évocation événementielle
   Il existe des différences évidentes entre ces deux scénarios d'évocation sous Android, qu'il s'agisse d'une évocation via iframe ou location.href, basée sur Xiaomi 1s Par exemple, chrome :

Lier l'événement pour piloter manuellement l'évocation :

<a id="goApp" href="javascript:void(0);">点我打开APP</a>

//成功唤起
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;
};

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

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

Le contenu ci-dessus explique comment invoquer l'application en HTML5. J'espère qu'il sera utile à tout le monde.

Quels nouveaux éléments de balise sont ajoutés au HTML5

Plusieurs frameworks de développement mobile HTML5 utiles

Une brève discussion sur le développement futur de HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!