pushState pour un site full ajax
Bonjour à tous,
J'ai cherché et encore cherché mais je n'arrive pas au résultat attendu, aussi je viens vers vous en espérant que vous serez peut-être plus éclairé que moi :)
Je souhaiterai faire un site full ajax, autrement dis lorsqu'un utilisateur clique sur un lien, ce n'est pas la page au complet qui est rechargée mais juste l'information dont j'ai besoin grâce à de l'ajax.
Cependant, dans la mesure du possible je souhaiterai mettre à jour l'historique de navigation de l'utilisateur, je souhaiterai donc me servir de l'API history.
La partie ajax en elle-même fonctionne bien, je clique sur un lien et sa m'affiche la page souhaitée, cependant je rencontre des problème avec l'historique.
Tout d'abord, voici le code js:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| function load(url, isHistory) {
$.ajax({
method: 'GET',
url: url,
success: function(data) {
$('#content').html(data);
if ( isHistory )
history.pushState({url: this.url}, 'description', this.url);
},
error: function(xhr, status, error) {
console.log('error');
console.log(status + ' ' + error);
}
});
}
window.onpopstate = function(event) {
// Si c'est une des page "normale" du site
if ( event.state != null )
load(event.state.url, false);
// Si c'est la page d'entrée
else
load(location.href, false);
};
$('#content').on('click', 'a', function(event) {
event.preventDefault();
load($(this).attr('href'), true)
}); |
Notez que le php renvoie la page avec ou sans la structure suivant cette condition (pour permettre de partager n'importe quel lien)
Code:
<?php isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'
Avec ce code, voici ce qui fonctionne bien:
- Si j'avance d'une ou plusieurs page, je peux faire précédente jusqu'à la page d'accueil
- Si j'ai fais précédente je peux faire suivante
Et ce qui ne fonctionne pas:
- Si je fais actualisé sur une page, elle est d'abord chargée via le navigateur, ensuite via une requête ajax rechargeant la même chose.
- Si j'étais sur un autre domaine, que je vais sur mon site full ajax, que je navigue, puis je fais des précédente jusqu'à revenir sur l'autre domaine pour enfin revenir sur mon site avec un suivante, j'ai perdu la structure du site.
- Dans les différents tuto que j'ai pu lire, quand j'ai fais les tests sur les démos sa marchais, et malgrés le fait que je les ai suivit chez moi sa ne marche pas :(
A dernière petite info (au cas où) je suis sur google chrome, je n'ai pas encore essayé les autres navigateurs.
Voilà, merci d'avance pour votre aide :)
Cordialement, orion99
