pushState() et popState() pour débutant

**Daii619** · 04/06/2014, 01h21

Salutation à tous.

Je suis vraiment un débutant dans ce domaine, et j'aimerais obtenir votre aide si ce n'est trop demandé.

J'ai cherché une méthode pour afficher le contenu d'une page web à un autre, sans modifier la structure permettant d'avoir des éléments tels qu'un lecteur audio, etc.

Grâce au site suivant, j'ai trouvé le code source dont j'ai besoin... http://html5.gingerhost.com/

Javascript

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
// THIS IS WHERE THE MAGIC HAPPENS
$(function() {
	$('nav a').click(function(e) {
		$("#loading").show();
		href = $(this).attr("href");
		loadContent(href);
		// HISTORY.PUSHSTATE
		history.pushState('', 'New URL: '+href, href);
		e.preventDefault();
	});
	// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
	window.onpopstate = function(event) {
		$("#loading").show();
		console.log("pathname: "+location.pathname);
		loadContent(location.pathname);
	};
});
function loadContent(url){
	// USES JQUERY TO LOAD THE CONTENT
	$.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
		// THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
		$.each(json, function(key, value){
			$(key).html(value);
		});
		$("#loading").hide();
	});
	// THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
	$('li').removeClass('current');
	$('a[href="'+url+'"]').parent().addClass('current');
}

Le seul problème est, que j'ignore comment l'intégrer dans mon 'index' : je voudrais prendre les liens dans la partie Navigation, et afficher le contenu dans un 'div' / 'td' / 'article' ...

Voici mon index :

HTML

Code html :

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
<body>
	<!-- NAVIGATION BAR -->	
	<nav>
		<ul>
			<li class="navUrl"><a href="/">Home</a></li>
			<li class="navUrl"><a href="about_me.php">About Me</a></li>
			<li class="navUrl"><a href="contact.php">Contact</a></li>
			<li class="navUrl"><a href="donation.php">Donation</a></li>
		</ul>
	</nav>
	<main>
		<div id="loading"></div>
		<table>
			<tr>
				<td>Partie Gauche considérée comme "ASSIDE"</td>
				<td id="wrapper">
					Partie Droite "ARTICLE" : c'est ici que l'on affiche le contenu des pages...
				</td>
			</tr>
		</table>
	</main>
</body>

**Bovino** · 04/06/2014, 08h02

J'ai cherché une méthode pour afficher le contenu d'une page web à un autre

Ce n'est pas comme ça que fonctionne AJAX !
On ne charge pas "une page dans une autre", on remplace uniquement une partie de la page.
Ce qui signifie que le script PHP appelé ne doit renvoyer que la partie à remplacer, pas une page complète.

**Daii619** · 04/06/2014, 10h49

Si c'est le cas, alors tout le reste des informations de mon site devrais normalement être situé dans le fichier "contenu.php"...

Et le code ne ferra que remplacer le contenu du tableau <td id="wrapper"></td> par des portions du fichier "contenu.php"

Dans ce cas, comment structurer le fichier "contenu.php" lorsqu'on fera appel à lui par des liens fictifs (eg: '/about_me', '/FAQ', ...) ?