Historique HTML5, bouton Précédent et liens externes

-1

J'ai une application HTML5 qui manipule l'historique du navigateur pour afficher l'URL appropriée pour les appels Ajax. Cela fonctionne très bien, mais un problème se produit lorsque mon application a un lien hypertexte vers un site externe, disons http://www.google.com. Lorsque cela se produit, l'histoire ressemble à ceci:Historique HTML5, bouton Précédent et liens externes

My App Page A -> My App Page B -> Google

Lorsque l'utilisateur clique sur le bouton en arrière une fois, tout va bien. Ma page d'application B est affichée.

Mais lorsque l'utilisateur appuie une seconde fois sur le bouton Précédent, l'URL change, mais la page ne change pas. Mon application ne peut pas effectuer l'appel Ajax approprié pour afficher l'état de la page Ma application, car le gestionnaire onpopstate n'a jamais été appelé. Cela est dû au fait que le gestionnaire n'a pas été initialisé lorsque le navigateur est revenu sur la page Mon application (aucun événement ne se déclenche sur cet événement, donc je ne peux pas réinitialiser le gestionnaire.)

Cette expérience concerne Chrome, mais je n'a aucune raison de croire que c'est spécifique à Chrome. Y a-t-il un moyen de contourner ce problème?

Je sais que des applications comme Gmail ouvrent tous les liens hypertexte externes dans une nouvelle fenêtre. Mais les exigences de mon application ne me permettent pas de le faire.

Source

2012-06-16 davidgyoung

Vous devez utiliser un gestionnaire onload en plus du gestionnaire popstate, et vous [pourriez avoir besoin d'un gestionnaire de déchargement] (http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the- back-button) pour casser le cache du navigateur. – user123444555621

Je ne comprends pas pourquoi 'onpopstate' n'a jamais été appelé. Il doit être appelé chaque fois que l'utilisateur change d'emplacement. –

Le lien fourni par @ Pumbaa80 m'a mis sur la bonne voie.

Si vous mettez <body onunload=""> sur votre page, alors il casse le bfcache sur Chrome et d'autres navigateurs. Cela signifie que lorsque vous cliquez sur le bouton de retour pour revenir à la page de l'application B de Google, tous les événements JavaScript de l'état des pages se déclenchent.

Il n'y a aucun moyen d'obtenir onpopstate pour être appelé sur la page Ma page de l'application après être revenu de Google. (Cela serait illogique, car cet événement se déclenche uniquement sur la page où vous appuyez sur le bouton de retour.)

L'alternative consiste à exécuter la logique lorsque la page de l'application B est chargée. En cassant le bfcache comme décrit ci-dessus, jQuery dom ready tirera. En exécutant un code similaire à partir de onpopstate dans un rappel jQuery dom ready, je peux accéder aux données stockées dans l'objet History réinitialiser l'état de mon application Web HTML5 après le retour d'une page externe.

Source

2012-06-24 17:18:06 davidgyoung

Je pense que vous aurez besoin d'utiliser des balises de hachage pour enregistrer l'état de votre page, je ne vois pas un moyen de contourner cela. Je l'ai fait dans le passé avec beaucoup de succès en utilisant this jQuery plugin, avec le nom très à la mode BBQ (Back Button & Query library). Cela permettra à votre page d'effectuer des actions basées sur les balises de hachage dans l'URL.

Source

2012-06-16 19:54:31 ohaal

On dirait que vous ne connaissez pas l'état de pushState de HTML5: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().C2.A0method –

@Derek: Ça a l'air génial, merci pour le Heads up, va certainement utiliser cela dans le futur. Je vois cependant que le support pour ce n'est pas encore optimal, en l'absence de IE9 et en dessous qui compte beaucoup de trafic. Ref: http://caniuse.com/#search=pushState - Ma solution pourrait au moins servir de solution de repli. – ohaal

Historique HTML5, bouton Précédent et liens externes

Répondre

Questions connexes