Maison  >  Article  >  interface Web  >  Comment gérer l'événement de retour d'écoute dans l'implémentation HTML5 dans APP

Comment gérer l'événement de retour d'écoute dans l'implémentation HTML5 dans APP

小云云
小云云original
2018-03-16 10:54:013685parcourir

Cet article vous présente principalement des informations pertinentes sur les exemples de méthodes de surveillance du traitement des événements de retour dans l'application Html5. J'espère qu'il pourra vous aider. Lorsque nous utilisons le framework MUI, nous utilisons souvent une classe avec .mui-action-back dans l'en-tête.


<header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">货物查询</h1>
        </header>

Cliquez sur l'icône de retour dans l'en-tête pour revenir à la page précédente,


//以下是mui.js中的源码,可以看到,在点击返回的时候,内部做了以下的操作
//$.hook={}是专门用于记录浏览的历史的。
$.back = function() {
        if (typeof $.options.beforeback === &#39;function&#39;) {
            if ($.options.beforeback() === false) {
                return;
            }
        }
        $.doAction(&#39;backs&#39;);
    };

$.doAction = function(type, callback) {//返回上一个记录
        if ($.isFunction(callback)) { //指定了callback
            $.each($.hooks[type], callback);
        } else { //未指定callback,直接执行
            $.each($.hooks[type], function(index, hook) {
                return !hook.handle();
            });
        }
    };

$.addAction = function(type, hook) {//添加历史记录
        var hooks = $.hooks[type];
        if (!hooks) {
            hooks = [];
        }
        hook.index = hook.index || 1000;
        hooks.push(hook);
        hooks.sort(function(a, b) {
            return a.index - b.index;
        });
        $.hooks[type] = hooks;
        return $.hooks[type];
    };

Lorsque nous encapsulons H5 dans une APP, l'interface 5+ que nous utilisons a le concept de webview, qui est une fenêtre.

Au début, je ne faisais pas délibérément de distinction entre ces deux concepts, alors parfois je créais une nouvelle fenêtre pour ouvrir la page Web, ou parfois je sautais directement

par l'URL, par exemple comme emplacement.href.

Cela conduira à une situation lors de la surveillance du bouton retour du téléphone mobile. Le scénario est à peu près le suivant :

1. Ouvrez le logiciel et entrez dans la page d'accueil (main.html=>). ;HBuilder[webview]) [Le premier représente le chemin d'accès local de l'URL, et le second est l'ID de la fenêtre webview].

2. Accédez à l'interface de connexion via location.href au lieu de l'ouvrir en créant une vue Web.

3. Après vous être connecté, entrez dans la page de fonction, appuyez à nouveau sur Retour et revenez à la page de connexion. On s'attend à ce qu'après m'être connecté, si je clique sur le bouton de retour de mon téléphone, je me déconnecte directement. À cette fin, nous avons spécialement découvert la fonction de restauration MUI. Nous pouvons la mettre en œuvre en remplaçant cette méthode

Sur la page qui doit être surveillée :


<.>
mui.back=function(){
//写你监听返回键后需要做的操作
Mais, si vous utilisez toujours les deux modes précédents de saut de page Web et de création de formulaire, des résultats inattendus se produiront, c'est-à-dire que mui.back ne peut être surveillé que dans le fichier d'entrée et que la surveillance est effectuée sur d'autres pages ou Les formulaires ne seront pas surveillés, tous sont capturés par l'événement d'écoute mui.back du fichier d'entrée, et seule la logique métier d'écoute du fichier d'entrée sera exécutée, ce qui conduit à la situation embarrassante de revenir à la page précédente. personnalisation de l'événement de retour. : Par exemple, après être revenu à la page de connexion et avoir personnalisé l'événement de retour, on constate que tous les événements sont surveillés par le fichier d'entrée. Cela signifie que cela n'a aucun sens d'écrire mui.back=function(){} sur d'autres pages.

Si toutes les pages de renvoi sont ouvertes sous forme de formulaires, les problèmes ci-dessus ne se produiront pas. Chaque fenêtre peut normalement écouter la fonction personnalisée mui.back.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn