[DOM] Intercepter la création d'un élément

**Eric2a** · 18/08/2010, 00h31

Salut,

Le code ci-dessous ajoute dynamiquement une boite de message en haut de page. Une fois le document chargé, la boite se ferme.

Etant donné que la boite est ajoutée dans document.body, il est nécessaire de placer l'appel à la fonction appendLoadBox() (qui créé la boite) dans le document, après la balise body.

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!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" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<title>Boite de message</title>
		<meta name="description" content="Attendre le chargement complet du document" />
 
		<style type="text/css" media="screen"><!--
			#loading {
				margin:0px;padding:0px;
				position:absolute;left:8px;top:8px;
				width:224px;
				display:block;
				color:#000;background-color:#eee;
				border:4px #ccc solid;
				font-size:18px;
				overflow:auto;
				z-index:10
			}
			#loading p {margin:0px;padding:8px}
		-->
		</style>
 
		<script type="text/javascript"><!--
 
			// Retourne un objet HTML à partir de son id.
			function getId(id){
				var s=(typeof id==='string')?id:'';
				if(s!==''){
					if(document.getElementById)
						return document.getElementById(s);
					else if(document.all)
						return document.all[s];
					else if(document.layers)
						return document.layers[s];
				}
				return null;
			}
 
			// Ajoute la boite de message dans le document
			function appendLoadBox(){
				var box=document.createElement('div');
				if(box){
					box.id='loading';
					box.innerHTML='<p><strong>Chargement en cours...<\/strong><br \/><em>Merci de patienter<\/em>...<\/p>';
					box.style.display='block';
					document.body.appendChild(box);
				}
				return (box)?box:false;
			}
 
			// Supprime la boite de message du document
			function removeLoadBox(){
				if(loadBox){
					loadBox.style.display='none';
					while(loadBox.hasChildNodes())loadBox.removeChild(loadBox.lastChild);
					loadBox.parentNode.removeChild(loadBox);
					loadBox=null;
				}
			}
		//-->
		</script>
	</head>
 
	<body>
		<script type="text/javascript"><!--
			// La boite de message sera ajoutée à la balise "body" nouvellement créée.
			var loadBox=appendLoadBox();
			if(loadBox)
				window.onload=removeLoadBox; // Une fois le document chargé, on "ferme" la boite de message.
		//-->
		</script>
 
		<div id="gallery">
			<!--
				Ici, des images...
			-->
		</div>
	</body>
</html>

Mais j'aimerais placer tout le code Javascript dans un fichier externe...

Code :

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

1
2
3
<head>
<script type="text/javascript" src="loadbox.js"></script>
</head>

Et ne plus placer l'appel à la fonction appendLoadBox() dans body.

Est-ce possible d'intercepter (*) la création de l'élément body pour y insérer la boite ?

(*) À l'aide du gestionnaire d'évenements (comme nous le faisons avec window.onload).

**Eric2a** · 18/08/2010, 03h18

Cool... J'ai reussi à obtenir ce que je voulais : Plus de code Javascript dans body.

J'ai ajouté la fonction Init() sous la fonction removeLoadBox() entre les balises <head> et </head>.

Cette fonction vérifie à intervalle régulier la présence de la balise body. Si elle a été créé, alors la boite de message est ajoutée.

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
// On vérifie la présence de la balise body à intervalle régulier
var loadBox;
function Init(){
	if(document && document.getElementsByTagName('body')){
		// On suspend la minuterie
		clearInterval(timer);
 
		// La boite de message sera ajoutée à la balise "body" nouvellement créée
		loadBox=appendLoadBox();
 
		// Une fois le document chargé, on "ferme" la boite de message.
		if(loadBox)window.onload=removeLoadBox;
	}
}
var timer=setInterval('Init()',10);

Qu'en pensez-vous ? C'est propre ?

PS : Testé uniquement sous IE8

**Bovino** · 18/08/2010, 08h07

Pourquoi ne pas placer directement

Code :

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

window.onload=removeLoadBox;

dans le head ?

Je comprends mal l'utilité de la fonction Init()...

**Eric2a** · 18/08/2010, 16h25

Ne désirant pas de code Javascript dans body, si j'appelle directement appendLoadBox() dans <head>, la ligne

Code :

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

document.body.appendChild(box);

provoque une erreur car body n'existe pas encore.

La fonction Init() est appelée à intervalle régulier tant que la balise body n'est pas ajoutée dans l'arbre DOM.

Une fois la création de body interceptée par la fonction Init() :

La fonction appendLoadBox() peut être executée sans souci.
La fermeture de la boite peut-etre programmée ( window.onload=removeLoadBox; )

Ca fonctionne mais bon... c'est du bricolage.
Je voudrais savoir si nous pouvions faire cela à l'aide du gestionnaire d'évéments Javascript.

**SpaceFrog** · 18/08/2010, 16h27

je me demande si window.onload n'attendrait pas l'instanciation de la balise body ... ??

**Eric2a** · 18/08/2010, 18h42

onload est exécuté une fois la page chargée ainsi que toutes ses ressources (notamment les images).

Dans mon cas, onload me sert uniquement à fermer la boite de message car les images sont chargées à ce stade.

La fonction Init() permet d'ouvrir ma boite de message le plus tôt possible avant que les ressources soient chargées.

J'ai trouvé ceci

domReady

C'est la même idée mais mieux codé bien entendu :

Utilisation de setTimeout ou lieu de setInterval
Ne tente plus d'intercepter la création de l'élément body après 15 secondes.

J'ai donc - entre <head> et </head> - remplacé ma fonction Init() par la fonction domReady adapté à mon cas :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function domReady(){
	this.n = typeof this.n == 'undefined' ? 0 : this.n + 1;
	if(typeof document.getElementsByTagName != 'undefined' && (document.getElementsByTagName('body')[0] != null || document.body != null)){
		loadBox=appendLoadBox();
		if(loadBox)window.onload=removeLoadBox;
	}
	else if(this.n < 60){
		setTimeout('domReady()', 250);
	}
};
domReady();

Je continue à chercher si Javascript permet nativemment de nous "avertir" quand le DOM est chargé.

**SpaceFrog** · 19/08/2010, 08h07

Code :

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

$(function(){})

avec jquery

**Eric2a** · 19/08/2010, 12h58

En fait (j'ai homis de le mentionner), je ne désire pas utiliser de Frameworks.

Vos interventions m'ont convaincu...

il serait plus simple de placer l'élément script au début de l'élément body [...] Informer que la page est en cours de chargement est du ressort de l'agent utilisateur.

Il n'existe actuellement pas d'événement lié aux modifications de l'arbre DOM

Je replacerais l'appel à la fonction créant l'élément dans la balise body. C'est effectivement bien plus simple.

Merci à vous.

[DOM] Intercepter la création d'un élément

JavaScript

Discussions similaires

Partager

Partager