[Article] Virtualisation de pages web en DOM

**Lcf.vs** · 11/11/2011, 17h37

Bonjour � tous,

Voici l'�bauche de mon v�ritable premier article.

####################################################

Virtualisation de pages web en DOM

En Javascript/AJAX, vous aurez s�rement d�j� rencontr� l'impossibilit� pour l'utilisateur d'employer les fonctions "page pr�c�dente" et "page suivante".

Bien entendu, il existe des solutions jouant sur le hash mais ce n'est pas le cadre de ce sujet.

Je vais vous pr�senter une solution DOM, elle n'est pas correctement g�r�e par les navigateurs mais je la trouve plus qu'int�ressante et esp�re que son impl�mentation sera corrig�e par les concepteurs de navigateurs.

Vous ne le saviez peut-�tre pas mais votre navigateur n'enregistre pas que l'url des pages que vous visitez, en effet, il enregistre aussi l'�tat DOM de ces pages.

Pour tester le code pr�sent dans cet article, je vous conseille d'utiliser Firefox, navigateur qui semble au plus proche d'une gestion totale.

Les m�thodes que nous allons utiliser � cet effet sont :

document.open([MIMEtype [, historyPosition]]), elle sert � ouvrir un nouveau document dans l'onglet courant, ce qui ajoutera une nouvelle entr�e � l'historique du navigateur. En th�orie, il devrait �tre possible d'ajouter cette nouvelle entr�e � une position d�termin�e, dans l'historique, mais nous ne l'emploierons pas, par respect de l'environnement de notre visiteur et afin de simuler la navigation classique.

document.writeln(text), servant � �crire dans le document courant.

document.close(), pour fermer le chargement du document.

Mise en pratique

Prenez une page web classique avec un bouton:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
 
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Previous/Next DOM sample</title>
	</head>
	<body>
		<button>goTo</button>
	</body>
</html>

Ouvrons un document virtuel en Javascript :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
// La fonction ouvrant un document virtuel
function goTo(){
	document.open('text/html');
	document.close();
}
// Attachons cette fonction au clic sur notre bouton
document.getElementsByTagName('button')[0].onclick=goTo;

La base est �tablie mais il serait bien de travailler avec un document valide :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
 
function goTo(){
	document.open('text/html');
	// Ajoutons-y la déclaration XML
	document.writeln('<?xml version="1.0" encoding="UTF-8" standalone="yes"?>');
	// Ainsi qu'un doctype
	document.writeln('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
	document.close();
}
document.getElementsByTagName('button')[0].onclick=goTo;

� pr�sent, une petit peu de contenu pour illustrer l'exemple et, puisque nous avions d�j� du code pr�sent dans la page, autant le r�utiliser :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
 
function goTo(){
	// Sauvegardons le contenu du document courant, avant de le modifier
	var root=document.getElementsByTagName('html')[0];
	document.open('text/html');
	document.writeln('<?xml version="1.0" encoding="UTF-8" standalone="yes"?>');
	document.writeln('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
	// Ajoutons le contenu sauvegardé au document virtuel
	document.appendChild(root);
	document.close();
}
document.getElementsByTagName('button')[0].onclick=goTo;

Testez l'exemple, en ne cliquant qu'une seule fois sur le bouton (sous peine de d�clencher une exception "attempt to run compile-and-go script on a cleared scope" qui provoquera un "page pr�c�dente" infini) et observez le comportement du navigateur.

Il y a bien un nouveau chargement et le bouton "page pr�c�dente" est devenu actif, cqfd!

Un petit effet visuel, afin de mieux voir ce qui se passe r�ellement.

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
 
// Définissons une couleur d'origine pour le bouton
document.getElementsByTagName('button')[0].style.color='red';
function goTo(){
	var root=document.getElementsByTagName('html')[0],button;
	document.open('text/html');
	document.writeln('<?xml version="1.0" encoding="UTF-8" standalone="yes"?>');
	document.appendChild(root);
	// Récupérons notre bouton
	button=document.getElementsByTagName('button')[0];
	// Modifions sa couleur, en fonction de la couleur qu'il avait précédemment
	button.style.color=button.style.color=='red'?'green':button.style.color=='green'?'blue':'red';
	document.close();
}
document.getElementsByTagName('button')[0].onclick=goTo;

Revenons sur l'exception d�clench�e par Firefox lorsque l'on clique plusieurs fois sur le bouton.

Il semble, d'apr�s mes tests, que window est remis � neuf au chargement du document virtuel, n�anmoins, je soup�onne le navigateur de conserver des r�f�rences qu'un document qui n'existe plus, nous allons donc les red�finir :

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
 
document.getElementsByTagName('button')[0].style.color='red';
function goTo(){
	// Sauvegardons notre fonction goTo
	var root=document.getElementsByTagName('html')[0],button,tmp=window.goTo;
	document.open('text/html');
	document.writeln('<?xml version="1.0" encoding="UTF-8" standalone="yes"?>');
	document.appendChild(root);
	button=document.getElementsByTagName('button')[0];
	button.style.color=button.style.color=='red'?'green':button.style.color=='green'?'blue':'red';
	document.close();
	// Redéclarons notre fonction goTo
	window.goTo=tmp;
}
document.getElementsByTagName('button')[0].onclick=goTo;

Voil�, r�essayez ce code et vous observerez qu'il est d�sormais possible de naviguer au sein de documents virtuels avec les boutons "page pr�c�dente" et "page suivante".

Les b�mols

Le navigateur semble ne conserver que le dernier �tat du DOM, impossible donc, actuellement, de baser la navigation d'une application web sur ce syst�me.

Quid des autres navigateurs?

IE 9 :
Amn�sie? Il ne semble pas possible de "sauvegarder" l'arbre DOM, pour le reconstituer, apr�s document.open(). IE se rappelle bien du type d'objet (node) mais, par exemple, pas de son tagName.

Google Chrome 14 :
Ne semble pas stocker l'�tat du DOM et pr�-remplit le document avec des noeuds HTML.

####################################################

Je vous invite � me faire part des vos avis, conseils/critiques et vous en remercie d'avance.

**Gecko** · 14/11/2011, 15h42

Comme je viens de te le dire sur le chat, je trouve que ton article est int�ressant mais qu'il manque de d�mo.

C'est balo de mettre des sources dedans et de ne pas montrer le r�sultat en live

Cordialement Toine

**Willpower** · 14/11/2011, 16h04

J'avoue ne pas m'y connaitre l�-dedans (document.open etc..) mais ton article a au moins le m�rite d'avoir �veill� ma curiosit�.

[Article] Virtualisation de pages web en DOM

JavaScript

Discussions similaires

Partager

Partager