9
votes

Écouter le bouton Back du navigateur lorsque vous utilisez Ajax et enregistrez-la des données HTML en tant qu'objet. Bon ou Mauvais?

Je crée un script pour écouter le bouton arrière du navigateur et charger la page précédente. Je suis nouveau à JQuery et Javascript (une personne PHP). Avant de refuser cela, j'ai cherché l'ensemble du Web pour une bibliothèque. Mais comme j'utilise beaucoup de paramètres dans mes liens Ajax, je ne peux pas utiliser ces bibliothèques. J'avoue sa mon erreur, parce que je ne sais pas comment utiliser des systèmes aussi complexes. Je pense donc que si la création d'un système comme suit.

// get the contents of a particular div and save as an object/associative array 
// { hash : pageNumber, html : content}
function save_history(div){
    var content = $(div).html();
    // increment the page number and add hash tags to the URL
}   

// Listen to the browser hash value change
$(window).bind('hashchange', function () {
    hash = window.location.hash;
    if(hashValue){
        load_history(hashValue);
    }   
}); 

// Load data from history
function load_history(id){
    // fetch the content based on the hashvalue
    $(div).html(content);
}


9 commentaires

Pourquoi les implémentations de navigateur par défaut sont-elles inacceptables? Faites-vous une application web lourde très ajax? Je veux dire des navigateurs Ces jours-ci font toutes sortes de mises en cache, vous avertissez lorsque vous essayez de revenir à une demande postale, etc.


@ThatidiotGuy: Oui, tout le système est ajaxifié. Je ne prévois pas de mettre en cache les soumissions de formulaire. Juste toutes les vues.


Ensuite, vous obtenez un uppote, car je ne connais pas les meilleures pratiques pour cela non plus.


@ThatidiotGuyguy: Merci pour la uppote. Vous recherchez des conseils des gourous concernant les problèmes de navigateur, les problèmes de mémoire, etc.


Bon ou Mauvais; Je ne peux pas dire; Cross Navigateur convivial, ce n'est pas le cas.


Si je vous comprends correctement, vous pouvez utiliser l'API d'Histoire. Parcourez la page GITUB de ce projet pertinent (cliquez sur les liens et regardez votre barre de localisation) pour voir essentiellement comment cela fonctionne: github.com/ballupton/history.js


@AnonymousdownvotingAnlame: Pourquoi son navigateur pas cross convivial?


@Blender: Merci pour le lien. Mais j'ai vu cela plus tôt. Mes pages sont créées avec beaucoup de paramètres. Je ne suis donc pas sûr de savoir comment utiliser ce système.


Vous êtes probablement trop loin à ce stade - mais avez-vous envisagé d'utiliser Backbone.js ou une bibliothèque similaire? Avec une colonne vertébrale, vous définissez des modèles et des vues et des itinéraires (un # suivi d'un chemin d'accès à une vue / action) - et il gère l'aspect historique de celui-ci pour vous, quel que soit le nombre de paramètres que vous utilisez pour une vue (bien, dans raison).


3 Réponses :


0
votes

Si vous envisagez d'utiliser HTML5, jetez un coup d'œil à l'API d'historique. Il permet d'utiliser des commandes de navigateur natif sur les applications Web Ajax. Jetez un coup d'œil!

http://dicintohtml5.info/history.html


1 commentaires

Merci pour le lien. Mais j'ai vu cela plus tôt. Mes pages sont créées avec beaucoup de paramètres. Donc, je ne suis pas sûr de savoir comment utiliser ce système



0
votes

L'histoire API est la voie à suivre. Peu importe si vos pages sont créées avec de nombreux paramètres - s'ils sont suivis via des paramètres URL, la mise à jour de votre historique (qui met à jour l'URL) doit restaurer l'état de la page. Si vous n'utilisez pas les paramètres URL (c'est-à-dire que vous utilisez POST ou une solution personnalisée), Historique.pushstate () accepte trois paramètres: état, qui peut être n'importe quel objet (par exemple, la série de données de votre formulaire), puis Titre, puis l'URL de la "nouvelle" page. Ensuite, lorsque vous revenez en arrière, vous faites l'histoire.popstate (), qui renvoie tous les mêmes paramètres et vous pouvez ensuite analyser ces paramètres pour restaurer l'état "précédent" de votre page.

Sérieusement, lisez l'article Howrderek lié à de plus près ou de consulter cette autre question qui a des liens vers de nombreux autres tutoriels sur l'utilisation de l'histoire API: Bon tutoriel pour l'utilisation de l'API HTML5 Historique (Poussette?)


0 commentaires

2
votes

On dirait que Pjax est la bibliothèque que vous recherchez: https://github.com/defunkt/ jquery-pjax


0 commentaires