Changer de navigateur comportement du bouton retour pour mon application web?

Im faire une application comme " de la page web. La page est plus large que la fenêtre d'affichage du navigateur qui a son dépassement caché. En cliquant sur les différents liens modifie le CSS pour animer les différentes sections. Voici un très simple démo:
http://smartpeopletalkfast.co.uk/pos/

À ce stade, je travaille sur une démo, pas un site de production. Je veux intercepter le bouton précédent du navigateur, donc si vous avez accédé à un article, vous seriez de retour à la section précédente plutôt que de laisser la page web. Dans un monde parfait, ce serait le cas avec les mêmes animations ive utilisé pour la navigation des articles.

Cela peut-il être atteint? De la recherche de je ne pense pas qu'il est possible d'intercepter et de désactiver le navigateur par défaut du bouton retour.

Je sais y a beaucoup de messages sur la désactivation du bouton précédent du navigateur sur ce site et normalement la réponse est NE pas! Cependant à différentes sections dans ma page, c'est comme naviguer vers des pages distinctes, donc je pense que ce que Im essayant d'atteindre est en accord avec les attentes de l'utilisateur.

La façon dont quelque chose de similaire semble normalement être réalisé avec AJAX basé sur des applications est à l'aide de HTML5 Histoire de l'API. Comme je comprends, vous avez besoin d'ajouter des Url avec des fragments de l'historique du navigateur, donc quelque chose comme monsite.com#section2. Je ne suis pas sûr que cela fonctionnera pour moi cependant, comme le défilement horizontal n'est pas fondée sur le fragment de liens tels que le défilement vertical peut être. Peut-être que je pourrais
l'utilisation de JavaScript pour détecter l'URL se termine par un fragment de la même #section2 et de modifier le CSS de sorte que la 2e section est dans la fenêtre d'affichage? Je suppose qu'il n'y aurait aucun moyen de les animer à ce bien?

OriginalL'auteur Evanss | 2012-03-20

  1. 1

    Utilisation d'ancrage HTML des balises en cliquant sur un bouton de navigation (sur votre page). Ainsi, le défilement à l'endroit où le point d'ancrage est situé (en haut, à gauche). Ce comportement fera le navigateur boutons précédent et suivant permettent de naviguer à l'ancre.

    Prendre pour exemple:

    Code du bouton:

    <a href="#filters">Filters &lt;</a>
<a href="#map">Map &gt;</a>

    Il suffit de changer le point d'ancrage de l'avant et à l'arrière des boutons sur votre page telle qu'elle correspond à l'endroit où l'utilisateur est en cours de navigation. Cela rend le navigateur de garder trace de l'endroit où l'utilisateur se trouve sur votre page.

    Même si vous n'ajoutez pas de réels liens d'ancrage pour faire les balises de hachage de travail, vous pouvez toujours utiliser du javascript window.location.hash propriété à naviguer sur l'utilisateur vous-même.

    OriginalL'auteur Brian Graham

  2. 7

    L'idée de changer le natif comportement du bouton retour du navigateur est certainement un drapeau rouge de signalisation quelque chose est approché de mal, et n'est pas vraiment possible de la croix-navigateur.

    Je réagirais de la unload event pour le navigateur pour essayer et en douceur la transition entre les états.

    Il ne va pas être une unload dans une single page application.
    Si le bouton de retour est atteint, l'événement unload va surement mettre le feu.
    api.jquery.com/unload Ive a utilisé le code à partir de leur exemple, mais il ne semble pas fonctionner pour moi. $(window).décharger( function () { alert("au Revoir!"); } );
    oui, si vous quittez la page, unload le feu. Cependant, une seule page app est susceptible d'utiliser solution pour ajouter l'histoire entrées de sorte qu'en cliquant sur l'Arrière de ne pas quitter la page.

    OriginalL'auteur Gabe

  3. 3

    Je suis d'accord avec Gabe en que de tenter de modifier le comportement du bouton retour est généralement un drapeau rouge; cependant, après la lecture de ce que vous essayez de faire, je ne vois pas le problème. (Il pourrait être une terminologie chose – vous n'êtes pas vraiment essayer de changer le bouton de retour du comportement, vous essayez d'ajouter de l'état de l'historique du navigateur de sorte que le bouton de retour peuvent naviguer à travers elle.)

    Vous aurez envie d'utiliser jQuery BARBECUE, qui gère l'état sur l'URL de hachage (la partie après le #). Pour écouter la hashchange événement et animer entre vos panneaux en conséquence:

    $(window).on('hashchange', function() {
    var page = $.bbq.getState('page');
    //animate to `page`
});

    Maintenant, vous n'avez même pas à joindre les gestionnaires d'événements pour votre bouton page suivante – juste un lien:

    <a href="#page=map">Map</a>
    nice one, merci

    OriginalL'auteur josh3736