Comment être notifié sur les changements de l'histoire par l'histoire.pushState?

Alors, maintenant que HTML5 introduit de l'histoire.pushState de changer les navigateurs de l'histoire, les sites web de commencer à utiliser ce en combinaison avec l'Ajax au lieu de modifier l'identificateur de fragment de l'URL.

Malheureusement, cela signifie que ces appels ne peuvent pas être détecter plus par onhashchange.

Ma question est: Est-il un moyen fiable (hack? ;)) pour détecter si un site web utilise history.pushState? La spécification ne précise rien sur les événements qui se sont élevés (au moins je ne pouvais pas trouver quoi que ce soit).

J'ai essayé de créer une façade et remplacé window.history avec mon propre objet JavaScript, mais cela n'a eu aucun effet du tout.

Plus d'explications: je suis le développement d'un add-on Firefox qui doit détecter ces changements et agir en conséquence.

Je sais qu'il y a une question similaire il y a quelques jours qui a demandé si l'écoute de certains DOM événements serait efficace, mais je préfère ne pas compter sur ce que ces événements peuvent être générés pour beaucoup de raisons différentes.

Mise à jour:

Voici un jsfiddle (utiliser Firefox 4 et Chrome 8) qui montre que onpopstate n'est pas déclenché lorsque pushState est appelé (ou suis-je en train de faire quelque chose de mal? Hésitez pas à l'améliorer!).

Mise à jour 2:

L'autre (côté) problème, c'est que window.location n'est pas mis à jour lors de l'utilisation de pushState (mais j'ai lu sur ce déjà sur DONC, je pense).

InformationsquelleAutor Felix Kling | 2010-12-31

163

5.5.9.1 définitions d'Événements

La popstate événement est déclenché, dans certains cas, lorsque vous accédez à un historique de la session d'entrée.

Selon les ce, il n'y a aucune raison pour popstate être déclenché lorsque vous utilisez pushState. Mais un événement comme pushstate viendrait dans maniable. Parce que history est un objet hôte, vous devez être prudent avec elle, mais Firefox semble être sympa dans ce cas. Ce code fonctionne très bien:
```
(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        //... whatever else you want to do
        //maybe call onhashchange e.handler
        return pushState.apply(history, arguments);
    };
})(window.history);
```
Votre jsfiddle devient:
```
window.onpopstate = history.onpushstate = function(e) { ... }
```
Vous pouvez singe-patch window.history.replaceState de la même manière.

Remarque: bien sûr, vous pouvez ajouter onpushstate simplement à l'objet global, et vous pouvez même en faire manipuler plus d'événements par l'intermédiaire de add/removeListener
- Génial. Je me demande pourquoi mon wrapper n'a pas fonctionné...
- Vous avez dit que vous avez remplacé l'ensemble de la history objet. Qui peut être inutile dans ce cas.
- Probablement oui. Peut-être (ne sait pas) window.history est en lecture seule, mais les propriétés de l'histoire de l'objet ne sont pas... Merci beaucoup pour cette solution 🙂
- Selon la spécification il y a un "pagetransition" de l'événement, il semble que sa n'est pas encore Implémentée.
- cette solution est ingénieux, il fonctionne parfaitement dans ff4 et chrome, mais malheureusement, quand je l'utilise dans opera11, im obtenir l'erreur suivante lors de l'histoire.replacestate fonction est appelée: "Uncaught exception: TypeError: 'de la fenêtre.l'histoire.replaceState "n'est pas une fonction" je me demande pourquoi il fonctionne dans chrome et ff et pas de l'opéra... toutes les idées, toutes les solutions?
- Comme je l'ai dit dans ma réponse history est un objet hôte, il n'est pas garanti que la méthode ci-dessus fonctionne de la croix-navigateur. Mais la question était à propos d'un extension de Firefox, j'ai donc essayé de le résoudre dans Firefox.
- je sais que la question initiale a été de demander à propos de firefox, ce que je demande, c'est des conseils sur la façon de le faire travailler pour l'opéra, les idées, serait la bienvenue.
- Je vous dirais si je le savais. 🙂 Je pense qu'il n'y a pas moyen de le faire dans l'Opéra de l'atm.
- j'ai trouvé une solution à mon problème, je viens de faire un test de "l'histoire.replacestate" avant que j'appelle votre code, et seulement l'exécuter si replacestate existe, merci encore.
- semble que j'ai parlé à bientôt, maintenant, bizarrement, j'ai le code fonctionne très bien dans tous les navigateurs, sauf ff4b10, savez-vous si l'histoire.pushstate fonction est stable dans FF4, au-dessus de piégeage code ne semble fonctionner par intermittence pour moi
- Probablement une question de base, mais pourquoi êtes-vous la construction d'une fonction en l'appelant avec window.history en tant que paramètre au lieu de l'exécuter directement le code et l'utilisation de window.history à la place de la history paramètre?
- Il est pour le maintien de la portée mondiale nettoyer. Vous devez enregistrer le natif pushState méthode pour les utiliser plus tard. Ainsi, au lieu d'une variable globale que j'ai choisi pour encapsuler l'ensemble du code dans une IIFE: en.wikipedia.org/wiki/Immediately-invoked_function_expression
- Notez que l'appel de l'histoire.pushState() ou de l'histoire.replaceState() ne sera pas déclencher un événement popstate. Le popstate événement est déclenché uniquement en faisant un navigateur d'action comme le fait de cliquer sur le bouton retour (ou l'appel de l'histoire.back() en JavaScript). Selon developer.mozilla.org
- blog.mozilla.org/addons/2014/04/10/...
- quelle est la meilleure solution pour evergreen navigateurs? Je ne veux pas utiliser d'interrogation
- Quel est le but de la if (typeof history.onpushstate == "function") vérifier exactement? Ce n'est pas définie dans n'importe quel navigateur, j'ai essayé... :^) Peut-être que certains vieux de la version du navigateur?
- C'est NOTRE gestionnaire d'événements personnalisés définis ci-dessous. Lire l'ensemble de la réponse.
- Ce code fonctionne Dans les pages web, mais je ne suis pas capable de l'utiliser dans un de mes extensions de chrome, j'ai injecté un fichier JS qui contient ce code. toute solution ?
- Downvoted, l'interrogation est beaucoup mieux que le monkey patching, ce monkey patching peut être annulée par n'importe quel autre script et vous n'obtenez PAS de notification si cela arrive
- Voici un exemple de Google autotrack bibliothèque primordial pushstate et replaceState pour suivre les changements de l'url: github.com/googleanalytics/autotrack/blob/...
InformationsquelleAutor gblazex
3

Vous pouvez lier à la window.onpopstate événement?

https://developer.mozilla.org/en/DOM%3awindow.onpopstate

De la documentation:

Un gestionnaire d'événements pour l'popstate
événement sur la fenêtre.

Un popstate événement est distribué à l'
fenêtre à chaque fois l'actif de l'histoire
entrée changements. Si l'entrée de l'historique
en cours d'activation a été créé par un appel
pour l'histoire.pushState() ou a été affecté
par un appel à l'histoire.replaceState(),
l'événement popstate est la propriété de l'etat
contient une copie de l'entrée de l'historique de l'
d'état de l'objet.
- J'ai essayé déjà, et l'événement est déclenché lorsque l'utilisateur va rentrer dans l'histoire (ou l'un des history.go, .back) les fonctions sont appelées. Mais pas sur pushState. Voici ma tentative de le tester, peut-être que je fais quelque chose de mal: jsfiddle.net/fkling/vV9vd Il semble uniquement lié à la manière que si l'histoire a été modifié par pushState, le correspondant de l'état de l'objet est passé au gestionnaire d'événement lorsque les autres méthodes sont appelées.
- Ah. Dans ce cas, la seule chose que je peux penser à est de s'inscrire à un délai d'attente de regarder la longueur de l'histoire de la pile et le feu un événement si la taille de la pile a changé.
- Ok c'est une idée intéressante. La seule chose est que le délai d'attente serait à feu assez souvent afin que l'utilisateur ne remarque pas tout (long) délai (j'ai pour charger et afficher les données de la nouvelle URL). J'essaie toujours d'éviter des délais d'attente et d'interrogation, si possible, mais jusqu'à présent cela semble être la seule solution. Je vais encore attendre d'autres propositions. Mais je vous remercie beaucoup pour l'instant!
- Il pourrait même être suffisant pour vérifier la longueur de l'histoire à coller sur chaque clic.
- Oui - qui serait à l'œuvre. J'ai été d'avoir un jeu avec cette question la plus importante est la replaceState appel qui ne lancerait pas un événement, car la taille de la pile n'aurait pas changé.
InformationsquelleAutor stef

J'ai utilisé ceci:

var _wr = function(type) {
    var orig = history[type];
    return function() {
        var rv = orig.apply(this, arguments);
        var e = new Event(type);
        e.arguments = arguments;
        window.dispatchEvent(e);
        return rv;
    };
};
history.pushState = _wr('pushState'), history.replaceState = _wr('replaceState');

window.addEventListener('replaceState', function(e) {
    console.warn('THEY DID IT AGAIN!');
});

C'est presque la même que galambalazs fait.

C'est généralement les excès de si. Et il pourrait ne pas fonctionner dans tous les navigateurs. (Je ne se soucient ma version de mon navigateur).

(Et il laisse une var _wr, de sorte que vous pouvez l'envelopper ou quelque chose. Je n'ai pas de soins à ce sujet.)

InformationsquelleAutor Rudie

1

Je pense que ce sujet a besoin d'une solution plus moderne.

Je suis sûr que nsIWebProgressListener était autour du dos, puis je suis surpris que personne ne le mentionne.

À partir d'un framescript (pour e10s de compatibilité):
```
let webProgress = docShell.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIWebProgress);
webProgress.addProgressListener(this, Ci.nsIWebProgress.NOTIFY_STATE_WINDOW | Ci.nsIWebProgress.NOTIFY_LOCATION);
```
Puis l'écoute dans la onLoacationChange
```
onLocationChange: function onLocationChange(webProgress, request, locationURI, flags) {
       if (flags & Ci.nsIWebProgressListener.LOCATION_CHANGE_SAME_DOCUMENT
```
Qui sera apparemment attraper tous pushState de l'. Mais il y a un commentaire indiquant que "déclenche ÉGALEMENT pour pushState". Nous avons donc besoin de faire un peu plus de filtrage ici pour s'assurer qu'il est juste pushstate choses.

Basée sur: https://github.com/jgraham/gecko/blob/55d8d9aa7311386ee2dabfccb481684c8920a527/toolkit/modules/addons/WebNavigation.jsm#L18

Et: resource://gre/modules/WebNavigationContent.js
- Cette réponse n'a rien à voir avec le commentaire, si je ne me trompe. WebProgressListeners sont pour les extensions de FF? Cette question est à propos HTML5 histoire
- Vous avez raison, mon mauvais
- permet de supprimer ces commentaires s'il vous plaît
InformationsquelleAutor Noitidart
0

galambalazs réponse singe patchs window.history.pushState et window.history.replaceState, mais pour quelque raison il a cessé de travailler pour moi. Voici une alternative qui n'est pas aussi agréable car il utilise l'interrogation:
```
(function() {
    var previousState = window.history.state;
    setInterval(function() {
        if (previousState !== window.history.state) {
            previousState = window.history.state;
            myCallback();
        }
    }, 100);
})();
```
- est-il une alternative pour l'interrogation?
- voir les autres réponses.
- L'interrogation n'est pas agréable, mais laid. Mais bon, vous n'avez pas le choix vous l'avez dit.
- C'est beaucoup mieux que monkey patching, le monkey patching peut être annulée par d'autres script et vous n'obtenez PAS de notifications à ce sujet.
InformationsquelleAutor Flimm
0

Depuis que vous vous posez à propos d'un addon Firefox, voici le code que j'ai eu à travailler. À l'aide de unsafeWindow est n'est plus recommandé, et d'erreur quand pushState est appelé à partir d'un script client après avoir été modifié:

De refus d'autorisation pour l'accès à la propriété de l'histoire.pushState

Au lieu de cela, il y a une API appelée exportFunction qui permet à la fonction d'être injecté dans window.history comme ceci:
```
var pushState = history.pushState;

function pushStateHack (state) {
    if (typeof history.onpushstate == "function") {
        history.onpushstate({state: state});
    }

    return pushState.apply(history, arguments);
}

history.onpushstate = function(state) {
    //callback here
}

exportFunction(pushStateHack, unsafeWindow.history, {defineAs: 'pushState', allowCallbacks: true});
```
InformationsquelleAutor nathancahill
0

Bien, je vois de nombreux exemples de remplacement de la pushState propriété de history mais je ne suis pas sûr que ce soit une bonne idée, je préfère créer un service de base avec une API similaire à l'histoire de cette façon, vous pouvez contrôler non seulement de pousser l'état, mais de remplacer l'état et il ouvert des portes pour beaucoup d'autres implémentations ne s'appuyant pas sur l'histoire mondiale de l'API. Veuillez consulter l'exemple suivant:
```
function HistoryAPI(history) {
    EventEmitter.call(this);
    this.history = history;
}

HistoryAPI.prototype = utils.inherits(EventEmitter.prototype);

const prototype = {
    pushState: function(state, title, pathname){
        this.emit('pushstate', state, title, pathname);
        this.history.pushState(state, title, pathname);
    },

    replaceState: function(state, title, pathname){
        this.emit('replacestate', state, title, pathname);
        this.history.replaceState(state, title, pathname);
    }
};

Object.keys(prototype).forEach(key => {
    HistoryAPI.prototype = prototype[key];
});
```
Si vous avez besoin de la EventEmitter définition, le code ci-dessus est basé sur NodeJS cas de l'émetteur: https://github.com/nodejs/node/blob/36732084db9d0ff59b6ce31e839450cd91a156be/lib/events.js. utils.inherits mise en œuvre peut être trouvé ici: https://github.com/nodejs/node/blob/36732084db9d0ff59b6ce31e839450cd91a156be/lib/util.js#L970
- Où est utils venir en utils.inherits(EventEmitter.prototype); ???
- J'ai juste édité ma réponse avec les informations demandées, veuillez vérifier!
- Que c'est un joli & clean idée d'encapsuler les fonctions. Mais si la troisième partie de la bibliothèque des appels pour pushState, votre HistoryApi ne serez pas averti.
InformationsquelleAutor Victor Queiroz
0

Enfin trouvé la "bonne" façon de faire cela! Il nécessite l'ajout d'un privilège à l'extension et à l'aide de la page de fond (et pas seulement un contenu de script), mais il fonctionne.

L'événement que vous souhaitez est navigateur.webNavigation.onHistoryStateUpdated, qui est déclenché lorsqu'une page utilise le history API pour modifier l'URL. Il se déclenche uniquement pour les sites que vous avez l'autorisation d'accès, et vous pouvez également utiliser un filtre d'URL pour couper plus bas sur le spam si vous en avez besoin. Il nécessite la webNavigation autorisation (et bien sûr de l'hôte la permission pour le domaine concerné(s)).

L'événement de rappel obtient l'onglet ID de l'URL de la page qui est en cours de "naviguer", et d'autres détails. Si vous avez besoin de prendre une action dans le contenu du script de la page lorsque l'événement se déclenche, soit injecter le script approprié directement à partir de la page d'arrière-plan, ou le contenu de script ouvrir un port à l'arrière-plan de la page lors du chargement, de l'arrière-plan de la page enregistrer ce port dans une collection indexée par onglet ID, et d'envoyer un message à travers le port (à partir de l'arrière-plan de script pour le contenu du script) lorsque l'événement est déclenché.

InformationsquelleAutor CBHacking
-4

Standard unis:

Noter que l'appel de l'histoire.pushState() ou de l'histoire.replaceState() ne sera pas déclencher un événement popstate. Le popstate événement est déclenché uniquement en faisant un navigateur d'action comme le fait de cliquer sur le bouton retour (ou l'appel de l'histoire.back() en JavaScript)

nous avons besoin de l'historique des appels.de retour() pour trigeer WindowEventHandlers.onpopstate

Donc insted de:
```
history.pushState(...)
```
faire:
```
history.pushState(...)
history.pushState(...)
history.back()
```
InformationsquelleAutor user2360102

Vous devez vous connecter pour publier un commentaire.