Comment appeler la fonction APP dans la page H5

Cette fois, je vais vous montrer comment appeler la fonction APP dans la page H5. Quelles sont les précautions lors de l'appel de la fonction APP dans la page H5. Ce qui suit est un cas pratique, prenons un. regarder.

Ce type de fonction est souvent vu sur le marché et devrait être très courant maintenant, comme Taobao H5, Zhihu H5, etc. . .

Cliquez dessus pour lancer l'application ou ouvrir la page de téléchargement ou télécharger directement.

Mais j'ai trouvé que cette fonction de Zhihu est un peu différente

Sa logique est de me demander d'abord si je dois ouvrir l'application Zhihu sur mon téléphone (le mécanisme du navigateur demande la permission à l'utilisateur). ). Ensuite, l’invite de téléchargement apparaît à nouveau.

Schéma d'URL de solution

Le schéma d'URL est pris en charge sur IOS et Android et offre une bonne compatibilité.

Utilisez d'abord iframe

Le pseudo-code est le suivant :

const iframe = document.createElement('iframe');
iframe.src = 'URL scheme'; // URL scheme的方式跳转
iframe.style.display = 'none';
document.body.appendChild(iframe);

À ce moment, si tous les environnements le prennent en charge, l'APP sera réveillée.

Mais c'est une situation idéale, il faut plutôt faire la logique rapide du traitement de compatibilité.

Certains systèmes intercepteront le src de l'iframe (ce n'est qu'une des raisons de l'échec du réveil de l'APP), car cet attribut src est un pirate informatique illégal, et de nombreuses vulnérabilités sont causé par son utilisation.

Donc, à ce stade, il est nécessaire de déterminer l'échec du réglage de l'APP.

Le pseudo code est le suivant :

const timer = 1000;
setTimeout(function() {
        // 执行成功后移除iframe
    document.body.removeChild(iframe);
    //setTimeout小于2000通常认为是唤起APP失败
    if (Date.now() - last < 2000) {
            // 执行失败函数
            // 这里需要考虑一下之前知乎遇到的那个问题（浏览器询问导致时间小于2S）
    } else {
           //  执行成功函数
        }
}, timer);

Compréhension :

Si l'appel réussit, la page H5 passera en arrière-plan et le minuteur sera retardé. Même si l'utilisateur passe de l'application à la page H5, le décalage horaire doit être supérieur à 2S.

Si l'éveil échoue, le timer sera exécuté à temps (même s'il y a un délai de 100ms, c'est suffisant), et il doit être inférieur à 2S à ce moment.

Lorsque l'iframe est interceptée, nous pouvons utiliser window.location.href = URL Scheme pour la compatibilité.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser les nouvelles fonctionnalités de HTML 5

Tri par glissement de souris de table HTML Comment implémenter

html Comment transmettre des paramètres lorsque la page saute

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!