[HTML Javascript] Préserver les style d'un document.writeln

**BahCmoi** · 27/03/2006, 19h47

Salut,

j'aimerais savoir comment peut-on préserver les styles issus d'un fichier CSS dans un WriteLine javascript...
Dans ma balise body je fais un

Code :

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

<body OnLoad="MaFonctionWriteLn()">

où ma fonctionMaFonctionWriteLn() est chargée en extrayant des paramètres de l'adresse href d'écrire dans le document à des endroits bien précis à l'aide de variables locales...
le problème c'est que les styles ne sont pas appliqués
par exemple, voici un bout de mon code:

Code :

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

1
2
3
4
[...]
maString="<table><tr><td class=StyleTruc height=47 width=724 colspan=4><hr>" + MaVariableTexte + "</td></tr></table>";
[...]
document.writeln(maString);

C'est le style "StyleTruc" qui n'est pas appliqué alors que dans mon doc est bien écrit:

Code :

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

<link href="../../messtyles/stylepage.css" rel=stylesheet type=text/css>

de toute façon, ces styles fonctionnent puisque je les exploite dans une autre page.

Pouvez-vous me dire comment je peux procéder pour que la mise en forme se fasse avec mon CSS ?
J'ai même essayé de les copier dans le doc lui-même, mais ça ne change rien...

Merci par avance

**BahCmoi** · 28/03/2006, 11h36

Salut

euh j'ai provisoirement solutionné mon problème en greffant des balises

Code :

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

<font style="">

à la place des

Code :

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

class=MonStyle

mais je suis ouvert à toute proposition concernant cette possibilité.

**javatwister** · 28/03/2006, 12h08

ton writeln charge une nouvelle page, exempte de toute css! comment veux-tu que les styles soient conservés?

**BahCmoi** · 29/03/2006, 15h39

Envoyé par javatwister

ton writeln charge une nouvelle page, exempte de toute css! comment veux-tu que les styles soient conservés?

Bonjour

Merci pour cette remarque/réponse...
Je m'en doute mais, j'ai bien mis cette référence dans mes <HEAD>

Code :

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

<link href="../../messtyles/stylepage.css" rel=stylesheet type=text/css>

Pourquoi il sait lire le OnLoad de la balise BODY (D'ailleurs, je ne comprends pas non plus pourquoi il ne sait pas attribuer mon BGCOLOR="#988EB1" de la balise BODY ...) et pas link href de la balise HEAD ?

Comment t'y prendrais-tu alors toi ?
Moi, ce que je souhaite, c'est ouvrir cette page et que du texte change dynamiquement dedans en fonction de ce que lui passe... Je comprends le principe mais pas le fonctionnement en toute apparence.

Merci d'avoir répondu

**SpaceFrog** · 29/03/2006, 15h42

pourquoi fais tu un writeln ?

passe plutot par un innerHTML ou encore un createElement ...

**BahCmoi** · 29/03/2006, 15h47

Re,

Ben parce que je sais pas faire autrement.
Le but est simple, j'ai une série d'image dans une page sous forme de mosaic et je clique sur une des images.
Là, une page s'ouvre avec l'image agrandie et le texte qu'il l'accompagne plus deux trois information en plus et dans la page il y a un lien pour fermer et revenir, c'est tout.

**SpaceFrog** · 29/03/2006, 15h50

deux possibilités selon moi:

un popup et tu y colles ton image et ton texte

un div qu tu passe de display:none à display:bloc

**javatwister** · 29/03/2006, 15h51

aucun rapport avec write

tu mets la charrue avant les boeufs en voulant à tout prix utiliser une méthode plutôt qu'en cherchant les méthodes pour atteindre ton but;

**javatwister** · 29/03/2006, 15h58

ouvre une page prédéfinie (agrandissement.htm);
insère ton image proprement dans le corps de cette page;

Code :

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

1
2
3
4
5
6
7
8
9
mon_image.onclick=function(){
win2=window.open("agrandissement.htm","grand");
var adr=this.src.replace(".jpg","b.jpg");
var im=document.createElement("img");
im.src="adr";
var texte=liste_de_textes[indice_de_mon_image];
win2.document.getElementById("conteneur_image").appendChild(im);
win2.document.getElementById("conteneur_texte").appendChild(texte);
}

**SpaceFrog** · 29/03/2006, 16h03

c'est comment dirais-je ...
pâtissier ?

**BahCmoi** · 29/03/2006, 16h20

merci javatwister.
j'ai pas bien compris... en testant ton code j'ai une erreur

this.src est une valeur null ou n'est pas un objet

**javatwister** · 29/03/2006, 18h10

si mon_image est bien une image définie, il n'y aura pas d'erreur;

**BahCmoi** · 29/03/2006, 18h40

Euh, oui, pour toi peut-être...
C'est comme tous les gens qui maitrisent leur truc, il ont l'impression que ce qu'il expliquent est compréhensible.
moi, je suis pas super à l'aise avec ce... langage...

voilà ce que j'ai écrit pour la page de test:

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
<html>
 
<head>
<title>Essai</title>
</head>
 
<script>
function MaFonction()
{ 
	win2=window.open("agrandissement.htm","grand"); 
	var adr=this.src.replace(".jpg","b.jpg"); 
	var im=document.createElement("img"); 
	im.src="adr"; 
	//**** var texte=liste_de_textes[indice_de_mon_image]; 
	win2.document.getElementById("conteneur_image").appendChild(im); 
	//**** win2.document.getElementById("conteneur_texte").appendChild(texte); 
}
</script>
 
<body>
 
<img border="0" 
		 src="inspecteur.jpg" 
		 width="99" 
		 height="120"
		 onclick="MaFonction()">
</body>
</html>

et ça pour "agrandissement"

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
<html>
 
<head>
</head>
 
<body>
 
	<div id="conteneur_image" style="width: 311; height: 380">
 
	</div>
	<div id="conteneur_texte" style="width: 311; height: 10">
 
	</div>
 
</body>
 
</html>

Dans ma racine j'ai une tite image (inspecteur.jpg) et une grande (inspecteurb.jpg)...

je sens que je vais me faire jeter

**javatwister** · 29/03/2006, 18h43

nan nan, t'en es pas loin!
c'est juste que j'avais prévu le code pour un nombre x d'images;

pour garder ton code, passe simplement this en paramètre;

Code :

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

<img onclick="MaFonction(this)" />

et dans la fonction

Code :

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

1
2
3
4
5
function MaFonction(obj){
 
// et tu peux remplacer "this" par "obj";
 
}

**BahCmoi** · 29/03/2006, 19h09

ravie de savoir que j'étais pas loin

mais je maîtrise pas trop les tableaux en zavascript d'où mes REM devant les conteneurs texte
j'ai fait les modifs et j'ai une autre erreur

win2.document.getElementById("conteneur_texte").appendChild(texte) est une valeur null ou n'est pas un objet

décidément, je suis pas douée

**BahCmoi** · 30/03/2006, 11h21

Bon, c'est pas grave...
Je me débrouille autrement parce même avec ta réponse, javatwister, ça ne résound pas mon problème de CSS.
Je garde mes <font style=""> pour l'instant.

Merci pour vos réponses

**BahCmoi** · 03/04/2006, 12h08

Bonjour,

J'ai fini par trouver...
En fait, je créée une nouvelle instance de la page à chaque clic sur mon image thumbnail qui faisait appel à l'instruction.

Code :

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

document.writeln(maString);

Mais pour exploiter mon CSS, il fallait aussi spécifier le chemin du CSS dans mon document.writeln()...
Ce qu je n'avais pas compris, c'était que la totalité de la page était générée. C'est en regardant le code source de la page que j'ai compris.

Maintenant ça marche impécablement bien.
Merci à ceux qui se sont intéressés à mon problème.

[HTML Javascript] Préserver les style d'un document.writeln

JavaScript

Vue hybride

Discussions similaires

Partager

Partager