Discussion :

[yoh43]

Bonjour, j'ai un site qui fonctionne avec ce script :
/*************************************************
Fonction de definition de l'object xhr
**************************************************/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function new_xhr(){
	var xhr_object = null;
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject){ // Internet Explorer
	   try {
                xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non supporté par le navigateur
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	   xhr_object = false;
	}
	return xhr_object;
}

/*****************************************************
Fonction qui va recharger le contenu
******************************************************/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function load_page(select) {
	var xhr = new_xhr();//On crée un nouvel objet XMLHttpRequest
	xhr.onreadystatechange = function(){
		if ( xhr.readyState == 4 ){//Actions executées une fois le chargement fini
			if(xhr.status  != 200){//Message si il se preoduit une erreur
				document.getElementById("content").innerHTML ="Error code " + xhr.status;
			} else {//On met le contenu du fichier externe dans la div "content"
				document.getElementById("content").innerHTML = xhr.responseText;
			}
		} else {//Message affiché pendant le chargement
			document.getElementById("content").innerHTML = "Chargement en cours ... <img src='loading.gif' alt='' align='middle'/>";
		}
	}
	xhr.open("GET", select.split('?')[1]+".php", true);//Appel du fichier externe
	xhr.send(null);
}

Existe-t'il un moyen de faire fonctionner la navigation page précédente avec ceci, ou en le modifiant un peu ?
Merci d'avance.

[headmax]

Oui c'est possible mais faudra rajouter un lien avec l'appel qui va bien window.history.back() a ton innerHTML lors de l'écriture dans la page réponse Ajax:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("content").innerHTML = xhr.responseText + '<a href="javascript:window.history.back();">Retour</a>';

ou mettre un simple lien vers la page en question :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("content").innerHTML = xhr.responseText + '<a href="mypage.html">Retour</a>';

[yoh43]

Merci pour la réponse, mais ça ne marche pas, le lien s'affiche mais le contenu reste inchangé quand on clique dessus...
En plus c'est pas tout à fait ça que je voulais dire, j'ai déjà des liens retour dans mon site, et j'avais essayé de mettre history.back() sans succés.
Et je parlais plutôt de pouvoir utiliser les flèches du navigateur.
Le problème est peut-être du coup que history.back() reste inactif, mais je ne vois pas de raison à ça...

[headmax]

Tout dépend de l'action précédente d'ou l'ajout du lien vers ma page.html car si tu POST un formulaire l'history back risque de re poster soit ne pas marcher.Essaye avec window.history.go(-1) voir -2 ou -3 ou Re voir le concept.

[ABCIWEB]

Pour la navigation ajax il faut changer le hash dans ton url à chaque changement du DOM si tu veux que le changement soit enregistré dans l'historique du navigateur. C'est aussi utile pour le référencement des pages.

En complément il faudra mettre un écouteur onchange sur le hash pour recharger le contenu adéquat en fonction de sa valeur.

[yoh43]

Oui j'avais compris entre-temps qu'il fallait indiquer à la page de recharger le contenu, mais je n'arrive pas à le mettre en place, est-ce que je peux avoir un coup de main supplémentaire ?
Merci

[ABCIWEB]

Ce code permet le chargement des pages en javascript avec l'ajout d'un hash (ce qui est indispensable pour le référencement et permet par la même occasion l'utilisation des boutons du navigateur), ainsi que le rafraichissement de la page sans perdre le contenu en cours.

index.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(function() {
	function ini(){
		var hash = $(location).attr('hash');
		if (hash && hash != '#') {
			charge(hash.substr(1));
		} else {
			charge("page0");
		}
	}
 
	function charge(page) {
		$("#app").load(page+".html",function () {
			$(".btn").click(function () {
				$(location).attr('hash', $(this).data("target"));
				$("body").scrollTop(0);
			});
		});
	}
 
	$(window).on('hashchange',function(){ini();});
 
	ini();
});
</script> 
</head>
<body>
<div id="app"></div>
</body>
</html>

page0.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div>
Bonjour !
<button class="btn" data-target="page1">Suivant</button>
</div>

page1.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div>
Hello !
<button class="btn" data-target="page2">Suivant</button>
</div>

page2.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div>
Buenos días !
<button class="btn" data-target="">Accueil</button>
</div>

[yoh43]

Merci.
Bon j'ai pas réussi à l'adapter tel quel chez moi, mais simplement
window.onhashchange = une fonction qui appelle mes load_page fonctionne très bien.
Est-ce qu'il y a quelque chose de mieux dans ta solution, notamment pour les browsers ?

[ABCIWEB]

Tu n'as pas réussi l'adapter à ton code ou tu n'as pas réussi à faire fonctionner l'exemple chez toi ?

Pour faire fonctionner l'exemple il suffisait de copier ces fichiers dans un même répertoire en respectant le nom des trois derniers fichiers (page0.html, page1.html et page2.html) pour faire fonctionner correctement les liens qui sont indiqués dans l'attribut data-target des boutons. C'était la seule chose à faire.

Ensuite pour l'adapter à ton cas, normalement il aurait suffit de remplacer la valeur de ces liens dans les attributs data-target (pour mettre le nom de tes pages sans l'extension), ensuite si tu charge des pages php de remplacer $("#app").load(page+".html",function () {... par $("#app").load(page+".php",function () {... et finalement comme ton id conteneur se nomme "content" cela deviendrait $("#content").load(page+".php",function () {....

jQuery comme tu l'a remarqué permet de produire du code javascript plus concis et son avantage est qu'il est compatible avec tous les navigateurs sans se poser de question. Cela dit le code que tu as écrit précédemment est générique et ne devrait pas poser de problème de compatibilité. Si cela fonctionne y'a pas de raison d'utiliser jQuery juste pour cela. Mais quand on écrit beaucoup de code javascript cela peut vite devenir intéressant pour gagner du temps (il y a aussi beaucoup de fonctionnalités slide, animate, etc. qui évitent de se prendre la tête pour les animations).

Cela dit il faut avoir d'assez bonnes bases en javascript pour bien utiliser jQuery donc si ce n'est pas le cas il faut continuer un peu pour bien comprendre les bases, sinon tu peux perdre plus de temps qu'en gagner.

Le piège pour des débutants en jQuery est de toujours vouloir utiliser des fonctions JQuery pour faire du javascript, alors que toutes les fonctions javascript n'ont pas d'équivalent en jQuery. Seules celles qui gagnent à être raccourcies ou qui peuvent poser des problèmes de compatibilité ont été traitées, normal puisque c'est une lib pour gagner du temps, et donc des fonctions comme parseInt(), parseFloat() n'ont pas d'équivalent, de même le concept de prototype ou de classes n'est pas traité par jQuery, c'est universel et ne nécessite pas de raccourci. Alors que les traitements ajax qui sont plus fastidieux en javascript - on voit dans ton code qu'on doit faire un cas particulier pour internet Exploreur - ont un équivalent (cf mon code) qui permet d'être beaucoup plus concis. Il faut donc savoir utiliser conjointement les deux d'où l'intérêt d'avoir de bonnes bases en javascript avant d'utiliser jQuery.

Aujourd'hui jQuery est un moins indispensable qu'auparavant, les nouvelles versions de javascript ont des syntaxes plus concises (dont de nombreuses inspirées de la syntaxe jQuery) et les nouvelles versions des navigateurs sont de plus en plus compatibles ce qui fait que les traitements conditionnels en fonction des navigateurs (comme la définition de ton objet XHR) sont de moins en moins nombreux.

Mais bon, pour ceux qui veulent toucher un public le plus large possible sans se poser de questions de compatibilité (cela prend beaucoup de temps), car une petite minorité d'internautes n'utilisent peut-être encore qu'IE10... ou pour pouvoir toucher des pays en voie de développement dont on suppose qu'ils sont susceptibles d'utiliser plus fréquemment d'anciennes configurations, ou recyclées etc. jQuery peut rendre encore bien des services, surtout qu'il y a aussi les fonctions d'animations, et de nombreux pugins qui permettent de gagner énormément de temps.
J'ai par exemple développé un module d'upload ajax avec jQuery qu'il aurait été beaucoup plus laborieux de faire en javascript vanilla (sans lib), d'autant plus que cela m'a permis de l'interfacer avec des plugins jQuery existants pour proposer plus facilement en option, et sans avoir à développer de code supplémentaire, des recadrages d'image avant upload, ou encore d'afficher les informations EXIF des images etc.

[yoh43]

ça marche parfaitement, merci.

[yoh43]

Bonjour, j'ai encore une question, avec cette navigation, dans certaine page, j'ai des div avec des ancres et les retours aux ancres ne marchent plus.
J'ai cherché des solutions, j'ai trouvé celle-ci en jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<script>
$(function(){
    $('#cRetour').click(function(){
        $('#sousmilieu2').animate({scrollTop: 0},"slow");
    });
});
</script>

avec mon lien en bas de page qui a l'ID cRetour, ma div qui contient ce lien qui s'appelle sousmilieu2, et l'appel à la librairie dans le head.
Mais impossible de le faire marcher je ne comprends pas pourquoi...

[ABCIWEB]

Deux choses :

1/ Pour scrollTop tu es sur la bonne piste mais après il faut lire la doc. Une recherche sur les termes "scrollTop jquery" te donnera une bonne réponse.

scrollTop(0) te mènera en haut de page puisque tu indique la position 0. C'est le but de $("body").scrollTop(0); dans la programmation des boutons ".btn" de mon exemple.

Pour te rendre à une ancre il suffit de trouver la position de l'ancre par rapport au document (ta page entière) et pour cela on utilise offset(), plus précisément offset().top pour trouver la position verticale, soit :
$("body").scrollTop($("#ancre").offset().top);.

Et on utilise animate avec le même principe pour avoir une animation plutôt qu'une redirection instantanée.

2/ Le comportement javascript n'est défini que pour les éléments du DOM qui sont présents lors de l'exécution du script. Si tu charge une autre page tu change le DOM et il faut ré exécuter ta fonction pour programmer ces nouveaux éléments.

Note que dans mon exemple plus haut seule la ligne $(window).on('hashchange',function(){ini();};) n'a pas besoin d'être réinitialisée car elle concerne la fenêtre du document et non pas le DOM contenu dans le document.

Donc tu dois mettre cette fonction de redirection d'ancre dans le callback de ta fonction load, c'est à dire de la même manière que tu avais fait pour les boutons de navigation. Soit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function charge(page) {
	$( "#app" ).load(page+".html",function () {
		/* bouton navigation */							
		$(".btn").click(function () {
		    $(location).attr('hash', $(this).data("target"));
		    $('html,body').scrollTop(0);
	        });
 
		/* bouton ancre */
		$("#cRetour").click(function(){
		    var ancre = $("#sousmilieu2");
		    if(ancre.length) {
	                $('html,body').animate({scrollTop: ancre.offset().top},"fast");
		    }
		});
	});
}

J'ai employé $('html,body') plutôt que $('body') car plus généraliste pour définir une page.

Je fais un test sur "ancre" avec if(ancre.length) pour être certain de son existence. Si par hasard elle n'existait pas cela évite l'erreur que retournera jacascript "ancre.offset(...) is undefined" et qui pourrait bloquer le script dans certains cas. Plus généralement on applique pas de fonction sur un objet avant d'avoir vérifié son existence. Cela n'est pas indispensable dans tous les cas mais permet de prendre de bonnes habitudes et d'avoir un script fonctionnel dans tous les cas.

Si tu as d'autres comportements à ajouter il faudra les ajouter de la même manière, toujours dans le callback de la fonction load, pour qu'ils soient initialisés juste après le chargement des nouvelles pages.

C'est la bonne méthode pour programmer des comportements communs à chaque page, mais si tu ne veux pas surcharger cette fonction de callback pour des comportements particuliers, tu peux aussi importer ces comportements dans la page appelée. Par exemple :

page2.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="titre_page">Page Buenos días</div>
<div>
    Buenos días !
    <button class="btn" data-target="">Accueil</button>
    <p id="a" style="position:absolute;top:200px">Ancre</p>
    <p id="ra" style="position:absolute;top:1500px">Retour ancre </p>
</div>
<script> 
$(function() {
	/* bouton ancre */
	$("#ra").click(function(){
		var ancre = $("#a");
		if(ancre.length)
		{
			$('html,body').animate({scrollTop: ancre.offset().top},"fast");
		}
	});
});
</script>

Tu n'auras pas besoin d'ajouter de comportement dans le callback de la fonction load de la page d'appel puisque le comportement est intégré dans cette page.

Remarque que j'ai mis une balise div avec un id="titre_page" dans cette page. En effet il serait intéressant de changer le titre de ta page principale (appelante) en fonction de son contenu (les pages appelées).
Ta page principale pourrait donc ressembler à cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(function() {
 
	var titre_index = $("title"); // sélectionne le titre de cette page
	var titre_defaut = 'titre par defaut';
 
	function ini(){
		var hash = $(location).attr('hash');
		if (hash && hash != '#') {
			charge(hash.substr(1));
		} else {
			charge("page0");
		}
	}
 
	function charge(page) {
		$("#app").load(page+".html",function () {
			/* bouton navigation */							
			$(".btn").click(function () {
				$(location).attr('hash', $(this).data("target"));
				$('html,body').scrollTop(0);
			});
 
			/* bouton ancre communs */
			$("#cRetour").click(function(){
				var ancre = $("#sousmilieu2");
				if(ancre.length) {
					$('html,body').animate({scrollTop: ancre.offset().top},"fast");
				}
			});
 
			/* Applique le titre si #titre_page existe */
			var title = $(this).find("#titre_page"); // $(this) correspond à la page importée.
			if(title.length) {
				titre_index.text(title.text()); // applique le titre à la fenêtre en cours (page appelante)
				title.remove(); // Supprime si affichage inutile dans la page importée
			}
			else {
				titre_index.text(titre_defaut);
			}
		});
	}
 
	$(window).on('hashchange',function(){ini();});
 
	ini();
});
</script> 
</head>
<body>
 
<div id="app"></div>
 
</body>
</html>

Et maintenant l'onglet de ta page principale prend le titre de la page appelée s'il existe.

Bon t'as de quoi travailler maintenant

[yoh43]

Ah merci encore, mais en fait quand je clique sur le lien pour remonter y'a rien qui se passe.
Je me demande si cela vient du fait que mes pages sont en php, et peut-être aussi que les pages appellées sont juste des fragments de code, c'est à dire juste le contenu qui est chargé ? (en fait je suis resté sur mon premier code, je n'arrivais pas à adapter ce que tu proposes à mon site, j'ai gardé juste le hashchange qui marche...)

[ABCIWEB]

Fais d'abord des tests avec les exemples que je t'ai donné, il faut que tu comprenne toutes les lignes de code sinon évidemment tu ne pourras pas l'adapter. La programmation ça ne se fait pas en cinq minutes, prends le temps et regarde la doc pour comprendre les fonctions. Surtout que c'est la base, quand tu auras compris ça tu pourras avancer et évoluer.

Si ton but est simplement de faire fonctionner un site rapidement et sans notions de programmation, utilises un CMS type wordress et tu n'auras que du travail de configuration à faire tant que tu trouve ton bonheur dans les fonctionnalités proposées. Par contre le sur mesure demande un travail d'apprentissage beaucoup plus important.

[yoh43]

Bon merci encore pour ton aide mais je ne m'en sors pas...

Si je comprends bien le code que tu proposes évite les fonctions load que j'avais dans mon code initial avec les XMLHttpRequest et est plus direct ?
Le truc c'est que dans mon site je charge telle ou telle div et avec différents chemins d'accès selon des cookies, et c'est des liens pas des boutons.
Mais j'imagine que je peux mettre une id ou une classe sur mes liens à la place du .btn, et faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#div ou une autre").load(page ou chemin d'accés/page etc...+".php",function () {

selon mes conditions, mais le trucs c'est que ça me semblait un gros chantier à mettre en place et je suis arrivé à faire fonctionner ma fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

window.onhashchange = locationHashChanged;

avec mes anciennes fonctions load_quelque chose selon conditions.

Mais dans ma version je charge du contenu qui n'est que l'intérieur de la div changée, alors que ton code a des pages avec toutes les balises html head body... et je ne comprends pas pourquoi.

Autrement j'ai testé pas mal de choses et j'ai réussi à faire fonctionner le scroll sur la page d'accueil seulement et pas dans les pages chargées, je crois que c'est parce que je ne sais pas où et comment déclarer la fonction, là aussi j'ai tout testé, ça vient peut-être justement du fait que mes pages ne sont pas complètes ?

Par contre le hic c'est que j'utilise normalement des scripts "prototype", "scriptaculous", et "lightbox" pour des affichages de photos, et je me suis rendu compte qu'ils bloquaient la fonction scroll, à moins que je les enlève mais là j'ai un souci pour mes galeries qui s'affichent en pop-up, mais là aussi il y a peut-être une autre solution...

Bon j'espère que c'est pas trop décourageant tout ce texte...

[ABCIWEB]

Mais dans ma version je charge du contenu qui n'est que l'intérieur de la div changée, alors que ton code a des pages avec toutes les balises html head body... et je ne comprends pas pourquoi.

J'avais inséré des pages complètes pour montrer que ça fonctionne aussi. J'ai modifié mes exemples pour que cela soit plus simple à comprendre. Regarde une nouvelle fois.

Par contre le hic c'est que j'utilise normalement des scripts "prototype", "scriptaculous", et "lightbox" pour des affichages de photos, et je me suis rendu compte qu'ils bloquaient la fonction scroll, à moins que je les enlève mais là j'ai un souci pour mes galeries qui s'affichent en pop-up, mais là aussi il y a peut-être une autre solution...

Peut-être un conflit de variables. Essaie de faire fonctionner tes scripts javascript dans mes exemples. Etant donné que les variables jQuery sont protégées à l'intérieur de la closure $(fonction(){ il n'y aura pas de conflit de variables. Cela ne veut pas dire qu'il ne pourra pas y avoir quelques interférences mais c'est le meilleur moyens d'en éviter le plus possible.

[yoh43]

Ok j'ai testé ton code sur une page du site et ça marche, sauf effectivement quand je mets dans le head :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
	<script type="text/javascript" src="js/prototype.js"></script>
	<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
	<script type="text/javascript" src="js/lightbox.js"></script>

[NoSmoking]

Bonjour,

Par contre le hic c'est que j'utilise normalement des scripts "prototype", "scriptaculous", et "lightbox" pour des affichages de photos ...

cela reste une mauvaise pratique, tu devrais avoir moyen de t'en passer, ce ne sont pas les scripts qui manquent.

[ABCIWEB]

Oui essaies d'utiliser le moins de lib possible. jQuery est celle qui dispose du plus grand nombre de modules/script en tout genre, tu devrais pouvoir trouver l'équivalent de ce que tu fais. Mais bon en cas de besoin, jQuery propose le mode no conflit, la doc est ici.

[yoh43]

Bon merci ça marche nickel.
J'ai encore une question :
Sur une de mes pages, il y a plusieurs ancres, j'ai mis cette balise à la fin du code de la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<script>
$(function() {
$(".lien").click(function(){
				var ancre = $(this).data("target");
				if(ancre.length) {
					$('#milieu').animate({scrollTop: ancre.offset().top},"slow");
				}
			});
 
});
</script>

et les liens du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="lien" style="cursor:pointer;" data-target="anchor-drome">drome</a>

Mais ça ne marche pas, la page va direct au lien et le hash devient #anchor-drome...