[DOM] Intercepter la création d'un élément
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:
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:
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).
