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

Version imprimable

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:oops:).

Dans le bout de code:
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 <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:

document.getElementById

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

Merci d'avance pour votre aide.

Julien

16/03/2009, 18h17
E.Bzz

Bonjour,

Citation:

Envoyé par skual

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

Code:

document.getElementById

:koi: 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+
16/03/2009, 18h22
skual

Je l'écris comme ça en fait:

Code:

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

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

Bonne soirée.
16/03/2009, 18h25
E.Bzz

Citation:

Envoyé par skual

Je l'écris comme ça en fait:

Code:

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

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

A+

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:

<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:

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

17/03/2009, 09h31
Auteur

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.
17/03/2009, 09h33
E.Bzz

Citation:

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:

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

?

Citation:

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+
17/03/2009, 10h25
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.

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

Code:

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
17/03/2009, 10h38
E.Bzz

Citation:

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+
17/03/2009, 19h47
Auteur

Citation:

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 :D
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]
18/03/2009, 09h34
skual

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

Je vais essayer ces solutions et vous tiendrai au courant.

Bonne journée.

Julien

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:

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