js cliquez sur Retour pour accéder à la page spécifiée. compétences de mise en œuvre process

Cette fonction a été brièvement présentée auparavant. Cette fois, j'expliquerai en détail le principe et les problèmes existants (car elle utilise la nouvelle API de html5, il y a des problèmes de compatibilité. Il est recommandé d'utiliser cette méthode sur les terminaux mobiles).

Description de la fonction :

Créez un nouvel onglet dans le navigateur et spécifiez une URL Une fois la page Web chargée, cliquer en arrière n'est pas autorisé dans le cadre des procédures normales. Puisqu’il n’existe aucun enregistrement d’historique pertinent pour la page à onglet actuelle, il n’y a aucun enregistrement à renvoyer.

À la demande du client, dans ce cas, un lien (comme la page d'accueil) doit être ajouté à son historique, afin que sur la page nouvellement ouverte, en cliquant sur retour, vous puissiez accéder à la page d'accueil, permettant l'utilisateur de voir les diverses fonctions du système, la plate-forme de promotion.

1. Points clés de connaissances

HTML5 introduit la méthode history.pushState() et la méthode history.replaceState(), qui vous permettent d'ajouter et de modifier les entrées de l'historique une par une. Ces méthodes fonctionnent conjointement avec l'événement window.onpopstate.

Cas :
Supposons que http://mozilla.org/foo.html exécutera le code JavaScript suivant :

Copier le code Le code est le suivant :

var stateObj = { foo: "bar" }; .pushState( stateObj, "page 2", "bar.html");

Cela entraînera l'affichage de la barre d'adresse du navigateur http://mozilla.org/bar.html, mais ne chargera pas la page bar.html ni la barre de vérification html. existe.

Supposons que l'utilisateur navigue maintenant vers http://google.com, puis clique sur le bouton de retour. À ce stade, la barre d'adresse affiche http: //mozilla.org/bar.html, et la page déclenchera l'événement popstate. L'objet state dans cet événement contient une copie de stateObj. La page ressemble à foo.html, bien que le contenu de la page puisse avoir été modifié lors de l'événement popstate.

Si nous cliquons à nouveau sur le bouton Précédent, l'URL redeviendra

http://mozilla.org/foo.html Le document déclenchera un autre événement popstate, cette fois car l’objet d’état est nul. La restauration ne modifie pas non plus le contenu du document.

Méthode pushState() pushState() prend trois paramètres : un objet d'état, un titre (maintenant ignoré) et une URL facultative. Examinons les détails de ces trois paramètres individuellement :

objet d'état — Un objet JavaScript associé à une nouvelle entrée d'historique créée avec la méthode pushState(). Chaque fois que l'utilisateur accède à un état nouvellement créé, l'événement popstate est déclenché et la propriété state de l'objet événement contient une copie de l'objet state de l'entrée d'historique.

Tout objet sérialisable peut être utilisé comme objet d'état. Étant donné que le navigateur FireFox enregistre les objets d'état sur le disque dur de l'utilisateur afin qu'ils puissent être restaurés après le redémarrage du navigateur par l'utilisateur, nous imposons une limite à la taille des objets d'état à 640 Ko. Si vous transmettez un objet d'état qui dépasse cette limite à la méthode pushState(), la méthode lèvera une exception. Si vous devez stocker de grandes quantités de données, il est recommandé d'utiliser sessionStorage ou localStorage.

title — FireFox ignore actuellement ce paramètre, bien qu'il puisse être utilisé à l'avenir. Étant donné que cette méthode pourrait être modifiée dans le futur, il est plus sûr de transmettre une chaîne vide. Alternativement, vous pouvez transmettre un titre court indiquant l’état dans lequel vous êtes sur le point d’entrer.

Adresse (URL) — L'adresse de la nouvelle entrée de l'historique. Le navigateur ne chargera pas l'adresse après avoir appelé la méthode pushState(), mais pourra tenter de la charger ultérieurement, par exemple lorsque l'utilisateur redémarrera le navigateur. La nouvelle URL ne doit pas nécessairement être un chemin absolu ; s'il s'agit d'un chemin relatif, elle sera basée sur l'URL actuelle ; l'URL entrante et l'URL actuelle doivent avoir la même origine, sinon pushState() lèvera une exception. . Ce paramètre est facultatif ; s'il n'est pas spécifié, ce sera l'URL actuelle du document.

Remarque : De Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) à Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), les objets entrants sont sérialisés à l'aide de JSON. À partir de Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), les objets sont sérialisés à l'aide de l'algorithme de copie structurée. Cela permettra de transmettre en toute sécurité davantage de types d’objets.

Dans un sens, appeler pushState() est similaire à la définition de window.location='#foo' dans le sens où il crée et active une nouvelle entrée d'historique dans le document actuel. Mais pushState() a ses propres avantages :

1. La nouvelle URL peut être n'importe quelle URL de même origine. Au contraire, lors de l'utilisation de la méthode window.location, seule la modification du hachage peut garantir qu'elle reste dans le même document.

2. Décidez si vous souhaitez modifier l'URL en fonction de vos besoins personnels. Au lieu de cela, la définition de window.location='#foo' crée un nouvel enregistrement d'historique uniquement si la valeur de hachage actuelle n'est pas foo.

3. Vous pouvez ajouter des données abstraites aux nouvelles entrées de l'historique. Si vous utilisez des méthodes basées sur le hachage, vous ne pouvez transcoder les données pertinentes qu'en une chaîne très courte.

Notez que la méthode pushState() ne déclenchera jamais l'événement hashchange, même si la nouvelle adresse ne modifie que le hachage.

événement popstate Chaque fois que l'historique activé change, l'événement popstate est déclenché. Si l'entrée d'historique activée a été créée par pushState ou affectée par la méthode replaceState, la propriété state de l'événement popstate contiendra une copie de l'objet d'état de l'historique.

Méthode replaceState() L'opération history.replaceState() est similaire à history.pushState(), sauf que la méthode replaceState() modifie l'entrée actuelle de l'historique plutôt que de créer une nouvelle entrée.

L'utilisation de la méthode replaceState() est particulièrement appropriée lorsque vous souhaitez mettre à jour l'objet d'état ou l'URL de l'entrée actuelle de l'historique en réponse à une opération de l'utilisateur.

2. Idées de mise en œuvre 1. Utilisez l'événement popstate pour surveiller l'événement de retour de clic.

2. Lorsque l'événement est déclenché, déterminez s'il existe une page dans l'historique de la page actuelle qui peut être renvoyée.

3. S'il n'y a pas de page vers laquelle revenir, insérez deux enregistrements :

1), page de saut désignée.

2), enregistrement vide. (Conserver la page actuelle inchangée)

3. Méthode de mise en œuvre

 //返回之前没页面则返回首页
    function pushHistory() {
      if (history.length < 2) {
        var state = {
          title: "index",
          url: getHttpPrefix + "index.html"
        };
        window.history.pushState(state, "index", location.href);
        state = {
          title: "index",
          url: ""
        };
        window.history.pushState(state, "index", "");
      }
      //lll("history.state" + history.state)
      //console.log(history.state) 
}

Copier après la connexion

Déterminez le nombre d'enregistrements dans l'historique actuel, car lorsque la page est chargée, le navigateur poussera automatiquement un enregistrement. Nous devons donc juger si la longueur est inférieure à 2.

L'objet d'état inséré sert à obtenir le lien url correspondant.
Remarque :
Dans le premier pushState, j'ai mis l'URL de saut dans l'objet d'état pour faciliter l'opération de saut. Le deuxième paramètre n’a aucune signification pratique car les navigateurs actuels ne prennent pas en charge ce paramètre.
Le troisième paramètre remplacera le lien dans la barre d'adresse actuelle, mais la page ne sautera pas. (J'ai déjà fait une erreur en définissant le troisième paramètre sur le lien de la page d'accueil, ce qui a provoqué le changement de la barre d'adresse en lien de la page d'accueil, de sorte que les liens de la page actuelle sautaient en fonction de la page d'accueil, provoquant ainsi que tous les liens de la page sauter. Mauvais transfert)

  setTimeout(function () {
      pushHistory()
      window.addEventListener("popstate", function (e) {
        lll("popstate"+window.history.state)
        if (window.history.state != null && window.history.state.url != "") {
          location.href = window.history.state.url
        }
      });
    }, 300);

Copier après la connexion

Ce code est placé et exécuté dans l'événement ready de la page. Le délai de 300 millisecondes sert à retarder l'opération et à éviter tout conflit avec l'événement pop système.
L'instruction if sert à déterminer s'il existe un objet d'état dans l'historique, car seuls les enregistrements qui répondent à nos exigences auront l'objet d'état que nous avons ajouté, donc sur la base de ce point, l'opération de saut de page peut être effectuée.
Cela permettra d’obtenir l’effet souhaité.
4. Écrivez à la fin
Inconvénients :
1. Évidemment, comme mentionné au début. Convient uniquement aux navigateurs prenant en charge HTML5.
2. Puisque deux enregistrements sont insérés, similaire au retour sur les terminaux mobiles tels que WeChat, vous devez cliquer deux fois de plus sur Retour pour lancer la page et revenir à la fenêtre de discussion WeChat, ce qui est une mauvaise expérience utilisateur.

Résumé :
Cette méthode peut certainement être optimisée et perfectionnée, mais ma force actuelle n'est pas suffisante pour la perfectionner à la perfection.

J'espère que les amis qui lisent cet article pourront s'inspirer ou trouver une meilleure façon d'y parvenir.