Cette fonction a été brièvement décrite auparavant. Cette fois, nous expliquerons les principes et les problèmes existants en détail (puisqu'il utilise la nouvelle API de HTML5, il existe des problèmes de compatibilité, il est donc recommandé que le terminal mobile utilise cette méthode).
Description de la fonction:
Créez une nouvelle page d'onglet dans le navigateur et spécifiez une URL. Une fois la page Web chargée, les clics ne sont pas autorisés à revenir sous le processus normal. Parce qu'il n'y a pas d'historique pertinent de la page d'onglet actuelle, aucun enregistrement ne peut être renvoyé.
En réponse à la demande du client, dans ce cas, ajoutez un lien (comme la page d'accueil) à son enregistrement d'historique, afin que sur la page nouvellement ouverte, cliquez pour retourner, vous pouvez passer à la page d'accueil, permettant aux utilisateurs de voir les différentes fonctions du système et de promouvoir la plate-forme.
1. Points clés de la connaissance
HTML5 présente la méthode History.pushState () et History.replaceState (), qui vous permettent d'ajouter et de modifier les entrées d'historique élément par élément. Ces méthodes peuvent fonctionner avec l'événement Window.OnpopState.
Cas:
Supposons http://mozilla.org/foo.html exécutera le code JavaScript suivant:
La copie de code est la suivante: var stateObj = {foo: "bar"}; History.pushstate (StateObj, "Page 2", "Bar.html");
Cela fera que la barre d'adresse du navigateur affiche http://mozilla.org/bar.html , mais la page Bar.html ne se chargera ni ne vérifiera pas si Bar.html existe.
Supposons que l'utilisateur navigue maintenant vers http://google.com , puis clique sur le bouton Retour. À l'heure actuelle, la barre d'adresse s'affichera http://mozilla.org/bar.html , et la page déclenchera l'événement Popstate. L'objet d'état de l'événement contient une copie de StateObj. La page ressemble à foo.html, bien que le contenu de la page puisse être modifié dans l'événement PopState.
Si nous cliquons à nouveau sur le bouton Retour, l'URL reviendra dans le document http://mozilla.org/foo.html pour déclencher un autre événement PopState, cette fois que l'objet d'état est nul. Fallback ne modifiera pas non plus le contenu du document.
Méthode pushstate ()
PushState () a trois paramètres: un objet d'état, un titre (qui sera ignoré maintenant) et une adresse URL facultative. Examinons séparément les détails de ces trois paramètres:
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 se rendra à l'état nouvellement créé, l'événement PopState est déclenché et la propriété d'état de l'objet Event contient une copie de l'objet d'état de l'entrée historique.
Tout objet sérialisable peut être traité comme un objet d'état. Étant donné que le navigateur Firefox enregistre des objets d'état sur le disque dur de l'utilisateur, afin qu'ils puissent être restaurés après que l'utilisateur a redémarré le navigateur, nous limitons de force la taille des objets d'état à 640k. Si vous passez un objet d'état dépassant cette limite à la méthode PushState (), la méthode lancera une exception. Si vous devez stocker de grandes quantités de données, il est recommandé d'utiliser SessionStorage ou LocalStorage.
Titre - Firefox Browser ignore actuellement ce paramètre, bien qu'il puisse être utilisé à l'avenir. Étant donné que cette méthode peut être modifiée à l'avenir, il sera plus sûr de passer une chaîne vide. Alternativement, vous pouvez également passer un court titre indiquant le statut que vous êtes sur le point d'entrer.
Adresse (URL) - L'adresse de la nouvelle entrée d'historique. Le navigateur ne charge pas l'adresse après avoir appelé la méthode PushState (), mais par la suite, il peut tenter de charger, comme l'utilisateur redémarre le navigateur. La nouvelle URL n'est pas nécessairement un chemin absolu; S'il s'agit d'un chemin relatif, il sera basé sur l'URL actuelle; L'URL passée doit être la même que l'URL actuelle, sinon, PushState () lancera une exception. Ce paramètre est facultatif; Si ce n'est pas spécifié, il s'agit de l'URL actuelle du document.
Remarque: Dans 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 passés 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 d'un algorithme de copie structuré. Cela permettra de passer davantage d'objets en toute sécurité.
Dans un sens, appeler PushState () est un peu similaire à la paramètre Window.Location = '# foo', et ils créent et activent tous de nouvelles entrées d'historique dans le document actuel. Mais Pushstate () a ses propres avantages:
1. La nouvelle URL peut être n'importe quelle URL homologue. En revanche, lors de l'utilisation de la méthode de la fenêtre., Modification du hachage peut s'assurer qu'il reste dans le même document.
2. Décidez de modifier l'URL en fonction de vos besoins personnels. Au lieu de cela, définissez Window.Location = '# foo' et créez un nouvel historique uniquement si la valeur de hachage actuelle n'est pas FOO.
3. Vous pouvez ajouter des données abstraites à la nouvelle entrée d'historique. Si vous utilisez une méthode basée sur le hachage, vous ne pouvez transcoder les données pertinentes que dans 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
L'événement PopState est déclenché chaque fois que l'historique activé change. Si l'entrée d'historique activée est créée par PushState ou affectée par la méthode Remplacestate, l'attribut d'état de l'événement PopState contiendra une copie de l'objet d'état de l'historique.
Méthode remplacée ()
L'opération History.ReplaceState () est similaire à History.pushState (), sauf que la méthode Rempacestate () modifiera l'entrée historique actuelle au lieu de créer une nouvelle entrée.
Lorsque vous souhaitez mettre à jour l'objet d'état ou l'URL de l'entrée d'historique actuel en réponse à certaines actions par l'utilisateur, l'utilisation de la méthode RempacEstate () est particulièrement appropriée.
2. Idées de mise en œuvre
1. Utilisez l'événement PopState pour écouter l'événement de clic et de retour.
2. Lorsque l'événement est déclenché, déterminez s'il existe une page pour retourner l'historique de la page actuelle.
3. S'il n'y a pas de page qui peut être retournée, deux enregistrements sont insérés:
1) La page de saut spécifiée.
2) Enregistrement vide. (Faites en sorte que la page actuelle ne change pas)
Méthode d'implémentation
// Retour à la page d'accueil sans page avant de renvoyer la fonction pushhistory () {if (history.length <2) {var state = {title: "index", url: gethttpprefix + "index.html"}; window.history.pushstate (état, "index", location.href); state = {title: "index", url: ""}; window.history.pushstate (état, "index", ""); } //lll("history.state "+ history.state) //console.log(history.state)}Déterminez le nombre d'enregistrements dans l'historique actuel. Étant donné que le navigateur pousse automatiquement un enregistrement lorsque la page sera chargée. Nous devons donc déterminer si la longueur est inférieure à 2.
L'objet d'état fourré est d'obtenir le lien URL correspondant.
Note:
J'ai mis l'URL de saut dans l'objet d'état pour le premier Pushstate pour faciliter l'opération de saut. Le deuxième paramètre n'a aucune signification pratique, car le navigateur actuel n'applique essentiellement pas 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 la liaison de page d'accueil, ce qui a provoqué la modification de la barre d'adresse en lien de page d'accueil, afin que les liens de la page actuelle soient redirigés en fonction de la page d'accueil, ce qui entraîne l'erreur de tous les liens de la page redirigées.)
setTimeout (function () {pushhistory () window.addeventListener ("popState", fonction (e) {lll ("popstate" + window.history.state) if (window.history.state! = null && window.history.state.url! = "") {location.href = window.history.state.url});Ce code est placé dans l'événement prêt de la page, avec un retard de 300 millisecondes pour traîner l'opération et empêcher les conflits avec l'événement POP du système.
Afin de déterminer si l'historique a un objet d'état, seuls les enregistrements qui répondent à nos exigences auront l'objet d'état que nous avons ajouté, de sorte que l'opération de saut de page peut être effectuée en fonction de ce point.
Cela réalisera l'effet que nous voulons.
4. Écrivez à la fin
défaut:
1. Évidemment, comme mentionné au début. Convient uniquement aux navigateurs qui prennent en charge HTML5.
2. Étant donné que deux enregistrements ont été insérés, le retour des terminaux mobiles comme WeChat nécessite deux clics pour revenir avant de lancer la page et de retourner à la fenêtre de chat WeChat, qui a une mauvaise expérience utilisateur.
Résumer:
Cette méthode peut certainement être optimisée et améliorée, mais ma force n'est pas suffisante pour être perfectionnée au niveau de perfection.
J'espère que les amis qui lisent cet article pourront s'inspirer, ou il existe de meilleures façons d'y parvenir.