[DOM] [Debutant] Affecter du contenu html à document.getElementById("blabla")

**skual** · 16/03/2009, 18h10

Bonjour à tous,

Après fait quelques recherches et lu la FAQ je ne trouve pas de réponse à mon problème (c'est peut être trop trivial en fait mais je débute

).

Dans le bout de code:

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
<html>
 
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
	#menu{position:absolute; top:0px; left:0px; width:300px; height:700px; border:solid black 1px;}
	#contenu{position:absolute; top:0px; left:302px; width:600px; height:700px; border:solid black 2px;}
	.cel{border:solid black 1px; text-align:center; cursor:hand;}
</style>
<script langage="JavaScript">
	function RefreshContenu(k)
	{  
	if (k==0)
		document.getElementById("contenu").innerHTML = "ici ma page htlm";
	else if (k==1)
		document.getElementById("contenu").innerHTML = "Localisation";		
	}
</script>
</head>	
 
<body>
 
<div id="menu">
<table width="100%">
	<TR><td onclick="RefreshContenu(0);" class="cel">Accueil</td></TR>
	<TR><td onclick="RefreshContenu(1);" class="cel">Localisation</td></TR>
</table>
</div>
 
<div id="contenu">
contenu initial
</div>
 
</body>
</html>

j'aimerais affecter une page html à la méthode:

Code :

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

document.getElementById

J'ai essayé pas mal de variantes et je suis un peu bloqué..

Merci d'avance pour votre aide.

Julien

**E.Bzz** · 16/03/2009, 18h17

Bonjour,

Envoyé par skual

j'aimerais affecter une page html à la méthode:

Code :

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

document.getElementById

Tel que tu l'as écrit ça devrait fonctionner ...

Quel est le résultat ?

Sinon, pour une "vraie" page (un .html), regarde du côté des iframe ...

A+

**skual** · 16/03/2009, 18h22

Je l'écris comme ça en fait:

Code :

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

document.getElementById("contenu") = accueil.html;

Merci pour ta précision, je vais voir du côté des Iframe.

Bonne soirée.

**E.Bzz** · 16/03/2009, 18h25

Envoyé par skual

Je l'écris comme ça en fait:

Code :

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

document.getElementById("contenu") = accueil.html;

Je parlais du code posté ci-dessus, qui, lui, doit fonctionner

A+

**skual** · 17/03/2009, 09h24

Bonjour E.bzz, bonjour à tous,

Oui tu as raison le code que j'avais mis au départ fonctionne, c'est simplement pour y attribuer directement du contenu html que cela ne fonctionne pas.

J'ai donc regardé du côté des iFrames.

J'ai vu que l'on pouvait en insérer une de cette façon:

Code :

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

<iframe name="cont" SRC="accueil.html" scrolling="no" height="220" width="180" FRAMEBORDER="no"></iframe>

Effectivement, cela fonctionne.

Maintenant dans mon bout de code javascript, j'aimerais insérer cette iFrame (ce qui je pense n'est pas possible puisque les langages ne sont pas les mêmes) à la place de "ma_page_html/mon_iFrame":

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
<html>
 
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
	#menu{position:absolute; top:0px; left:0px; width:300px; height:700px; border:solid black 1px;}
	#contenu{position:absolute; top:0px; left:302px; width:600px; height:700px; border:solid black 2px;}
	.cel{border:solid black 1px; text-align:center; cursor:hand;}
</style>
<script langage="JavaScript">
	function RefreshContenu(k)
	{  
	if (k==0)
		document.getElementById("contenu").innerHTML = "ma_page_htlm/mon_iFrame";
	else if (k==1)
		document.getElementById("contenu").innerHTML = "Localisation";		
	}
</script>
</head>	
 
<body>
 
<div id="menu">
<table width="100%">
	<TR><td onclick="RefreshContenu(0);" class="cel">Accueil</td></TR>
	<TR><td onclick="RefreshContenu(1);" class="cel">Localisation</td></TR>
</table>
</div>
 
<div id="contenu">
contenu initial
</div>
 
</body>
</html>

Je fais ça car j'ai lu que les Frame nuisaient au référencement. Mon besoin initial est ultra-simple: une page avec un menu et un contenu changeant en fonction de ce menu.

Merci d'avance pour votre aide.

Julien

**Auteur** · 17/03/2009, 09h31

bonjour,

si j'ai bien compris : tu souhaites intégrer une page HTML dans la page de ton site ?

Utilise innerHTML uniquement pour insérer du texte non formaté (c'est à dire sans balise HTML) sinon il faut passer par le DOM ou AJAX.

**E.Bzz** · 17/03/2009, 09h33

Envoyé par skual

Maintenant dans mon bout de code javascript, j'aimerais insérer cette iFrame (ce qui je pense n'est pas possible puisque les langages ne sont pas les mêmes) à la place de "ma_page_html/mon_iFrame"

Tu veux dire

Code :

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

document.frames['cont'].src='ma_page_htlm/mon_iFrame';

?

Envoyé par skual

Je fais ça car j'ai lu que les Frame nuisaient au référencement.

Heu ... possible, mais ça se contourne facilement en ajoutant des <A href> (masqués, ou à la place de tes TD cliquables) ciblant les mêmes liens ...

A+

**skual** · 17/03/2009, 10h25

Merci pour vos réponses.

Auteur, en fait je me suis mis au dev. web hier et j'aurais bien aimé commencer par les bases (HTML, javascript, CSS) sans toucher aux autres langages pour le moment.

E.bzz,
Oui j'aimerais faire ça:

Code :

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

document.frames['cont'].src='ma_page_htlm/mon_iFrame';

mais en récupérant l'ID de mon élément <div> pour aller y mettre le contenu de ma page accueil.html.

Merci.

Julien

**E.Bzz** · 17/03/2009, 10h38

Envoyé par skual

mais en récupérant l'ID de mon élément <div> pour aller y mettre le contenu de ma page accueil.html.

Et bien tu n'as qu'à placer ton iframe dans ce div ...

(pas possible de faire autrement, sauf via Ajax. Cf. Auteur)

A+

**Auteur** · 17/03/2009, 19h47

Envoyé par skual

Merci pour vos réponses.

Auteur, en fait je me suis mis au dev. web hier et j'aurais bien aimé commencer par les bases (HTML, javascript, CSS) sans toucher aux autres langages pour le moment.

DOM et AJAX ne sont pas des langages

DOM est une norme :
http://fr.wikipedia.org/wiki/Document_Object_Model
Quant à AJAX c'est une "extension" de javascript :
http://fr.wikipedia.org/wiki/Asynchr...Script_and_XML

Ceci dit pour attaquer AJAX, il faut bien connaître javascript et avoir des outils appropriés.
Donc pour le moment si tu souhaites manipuler ta page sans passer par le serveur, passe par des fonctions DOM (createElement, appendChild, etc.). Sur le forum tu trouveras à la pelle des exemples de scripts utilisant le DOM

[edit]
Si j'ai bien compris tes messages précédents, tu souhaites manipuler une page contenue dans une iframe à partir d'un script contenu dans la page principale ? Si c'est le cas cf. cette discussion :
http://www.developpez.net/forums/d27...enetre-enfant/ (1er message, exemple 3 : "3ème possibilité : La page enfant est contenue dans une iframe"
[/edit]

**skual** · 18/03/2009, 09h34

D'accord, merci à vous deux pour ces infos.

Je vais essayer ces solutions et vous tiendrai au courant.

Bonne journée.

Julien

**skual** · 19/03/2009, 09h33

Bonjour à tous,

Auteur, je prends note pour DOM et AJAX, effectivement il sera peut être interressant de s'y mettre.

E.bzz, finalement, j'ai essayé avec les <A href> dont tu parlais. Ca fonctionne et c'est plus simple:

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
<html>
 
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
 
<style>
	#menu{position:absolute; top:0px; left:0px; width:300px; height:700px; border:solid black 1px;}
	#contenu{position:absolute; top:0px; left:302px; width:600px; height:700px; border:solid black 2px;}
	.cel{border:solid black 1px; text-align:center; cursor:hand;}
</style>
 
</head>	
<body>
 
<div id="menu">
<a href="accueil.html" target="cont">Accueil</a>
<a href="localisation.html" target="cont">Localisation</a> 
</div>
 
<div id="contenu">
<iframe id="11" name="cont" src="" scrolling="auto" height="700" width="400" FRAMEBORDER="no"></iframe>
</div>
 
</body>
</html>

Merci pour votre aide

Julien

[DOM] [Debutant] Affecter du contenu html à document.getElementById("blabla")

JavaScript

Discussions similaires

Partager

Partager