11548 sujets

JavaScript, DOM et API Web HTML5

Salut à tous,

Je cherche à faire un site avec des pages dont les header et footer seraient chargés en Ajax. J'ai adapté un petit tutoriel que j'ai trouvé et cela fonctionne mais du coup toutes les pages ne font plus qu'une et les retours en arrière n'existent plus.

J'ai bien vu qu'avec Jquery adresse, on pouvait rendre possible ces "fonctionnalités" mais avant d'aller plus loin d'en ma découverte de ce type de développement, j'aurais aimé avoir votre avis.

Sachant que mon souhait est avant tout de faire en sorte que le header ne se rafraichisse pas quelque soit le navigateur, la lourdeur du header...bref comme ici sur Alsa créations Smiley cligne , alors merci de votre éclairage :
- si j'arrive à mettre en place jquery adresse, le référencement sera t-il le même comparé à un site "normal" ou chaque page est "indépendante" ?
- cela ne revient-il pas à créer un site avec iframes ?
- le petit tutorial dont je me suis inspiré date de 2008 (voir ci-dessous). Aujourd'hui, est-ce bien la bonne technique à utiliser (au regard de mon souhait) ?
- avec jquery adresse, puis-je également paramétrer la meta description de la page ?

Merci d'avance.
@plus
Zedbar


var advancedJavaScriptSupport = document.createElement && document.getElementsByTagName;

if (advancedJavaScriptSupport)
{
	$(initLinks);
	$(initShowMenu);
	$(initPage);
	document.write('<style tyle="text/css">div.hide {display: none;}</style>');
}
function initPage() {
	addCell();
	initMenu();
	initPressLinks();
}
function initLinks() {
	$('a').each(function() {
		var href = this.href;
		if (href.indexOf('.php') > 0) {
			if (href.indexOf('menu.php') > -1) {
				var menuId = href.substring(href.indexOf('#')+1);
				href = href.substring(0, href.indexOf('#'));
			}
			$(this).click(function(event) {
				$.ajax({
					url: href,
					complete: function(transport) {
						$('#page').html(transport.responseText);
						var bodyId;
						if (href.indexOf('about.php') > -1) {
							bodyId = 'bodyAbout';
						} else if (href.indexOf('menu.php') > -1) {
							bodyId = 'bodyMenu';
							$('#'+menuId).show();
							//initShowMenu(href);
						} else if (href.indexOf('principe.php') > -1) {
							bodyId = 'bodyContact';
						} else if (href.indexOf('press.php') > -1) {
							bodyId = 'bodyPress';
						} else {
							bodyId = 'bodyHome';
						}
						$('body').attr('id', bodyId);
						initPage();
					}
				});
				//document.location.href = '#header';
				return false;
			});
		}
	});
}

function addCell()
{
	var x = document.getElementsByTagName('table');
	for (var i = 0; i < x.length; i++)
	{
		if (x[i].className == 'todays')
		{
			var y = x[i].getElementsByTagName('tr');
			for (var j = 0; j < y.length; j++)
			{
				var td = y[j].childNodes[0];
				var marker = document.createElement('td');
				var txt = document.createTextNode('-');
				marker.appendChild(txt);
				marker.className = 'marker';
				y[j].insertBefore(marker, td);
			}
		}
	}
}

function showMenuType(id)
{
	var x = document.getElementById('menu');
	var y = x.getElementsByTagName('div');
	for (var i = 0; i < y.length; i++)
	{
		var div = y[i];
		if (div.className.indexOf('hide') == -1) continue;
		if (div.id != id)
		{
		 	div.style.display = 'none';
		}
		else
		{
			div.style.display = 'block';
		}
	}
}

function initShowMenu() {
	if (document.location.hash.length > 1)
	{
		// the url contains the id of one of the divs, so show it.
		var x = document.getElementById(document.location.hash.substring(1));
		x.style.display = 'block';
	}	
}

function initMenu()
{
	var x = document.getElementById('menutabs');
	if (x)
	{
			var y = x.getElementsByTagName('a');
			for (var i = 0; i < y.length; i++)
			{
				var link = y[i];
				var id = link.href.split('#')[1];
				link.destination = id;
				link.onclick = function()
				{
					showMenuType(this.destination);
					highlightTab(this);
					return false;
				}
			}
		}
	}

function highlightTab(tab)
{
	var li = tab.parentNode;
	var ul = li.parentNode;
	var lis = ul.getElementsByTagName('li');
	var id = li.id;

	for (var i = 0; i < lis.length; i++)
	{
		if (lis[i].className !== null)
		{
			lis[i].className = lis[i].className.replace(/\S/g, '');
		}
	}

	li.className = id + 'Activate';
}

function initPressLinks()
{
	if (!document.getElementById('pressText')) return;
	var x = document.getElementsByTagName('a');
	for (var i=0; i < x.length; i++)
	{
		if (x[i].className == 'pressPiece')
		{
			x[i].onclick = function()
			{
				var width = parseInt(this.getAttribute('xsize'));
				var height = parseInt(this.getAttribute('ysize'));
				// this should account for the approx. browser padding in a window
				width += 16;
				height += 16;
				pressPop(this.href, width, height);
				return false;
			}
		}
	}
}

function pressPop(link, width, height)
{
	window.open(link, 'amandine','width=' + width + ', height=' + height + ', scrollbars=yes, resizable=yes, toolbar=no');
}

[/i][/i][/i][/i][/i][/i][/i][/i][/i]
Zed1 a écrit :
Salut à tous,

Je cherche à faire un site avec des pages dont les header et footer seraient chargés en Ajax.


Heu… Tu veux dire que le header et le footer ne bouge pas et que tu changes le contenu principal non?
en fait, j'ai déjà fait un site, que j'ai je crois optimisé au maximum de mes compétences(css optimisée, jquery en bas de page, <? ob_start("ob_gzhandler"); ?>, flash dans iframe, images légères... etc) avec des include pour le header et le footer.

Or, autant sur Firefox, le header ne se "rafraichit" jamais, souvent sous Safari et parfois sous IE, la page est entièrement rechargée.

C'est en soit pas dramatique mais mon souhait est de faire en sorte que comme ici, seul le nouveau contenu soit rechargé.
"comme ici" ? il n'y a pas d'ajax ici (ça peut en donner l'impression, mais la page est bien rechargé entièrement) et je te déconseille de faire autrement sauf cas particulier.
Oui +1, le meilleur moyen sinon est d'avoir des pages uniquement en HTML, puis de les mettre en cache et de les GZipper pour améliorer au maximum le chargement.

Sinon, l'Ajax présente énormément d'inconvénients, surtout au niveau référencement, car tu vas perdre tout ton contenu de ce fait. Tu perdras aussi l'historique de navigation etc ...