11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J'ai un petit soucis concernant la manipulation de feuilles de style en JS.
Je m'explique :

J'utilise un Richtext Editor (WYSIWYG), avec donc une iFrame possédant un ID, qui est rempli (.contentWindow.document) via les commandes :.open(), write(), close().

J'aimerais appliquer une feuille de style à son contenu, du moins pour l'heure appliquer un margin/padding:0 à tous les éléments 'p' (mais s'il y a une solution générique pour que je puisse l'étendre à d'autres balises par la suite ça serait cool).

Si je glisse un <link /> dans la fonction write(), la balise apparaitra dans la zone de saisie, ce que je ne désire pas (et sous Firefox ça plante le navigateur)
J'ai essayé de glisser un <link />, dans la création de l'iFrame (<iframe><link /></iframe>) avant d'utiliser les commandes open/write/close, mais rien non plus.

Existerait-il donc une manière d'appliquer une feuille de style à un doc dans une iFrame d'une autre manière ? (je ne sais nullement comment.. via une commande javascript qui appliquerait une feuille de style via .contentWindow.document (ou .body), par exemple, ou autre...)

Je suis tout ouïe à toutes idées/propositions (allant même jusqu'à interdire l'utilisation de balise 'p' si quelqu'un pense que l'on peut intercepter ce type d'élement dans un tel éditeur)

Merci bien, et bonne journée ! Smiley cligne
Modifié par EureKa (24 Feb 2007 - 01:54)
Bonsoir,

A l'évidence je ne suis pas clair (mieux vaut tard que jamais me direz-vous)

Voici donc un exemple précis (tenant compte de mes tests depuis).

Prenons tout d'abord en exemple, un document tout simple :

<html>
<head>
</head>
<body>
	Exemple de Texte principal
</body>
</html>

Si je désire lui appliquer une feuille de style "ma_feuille.css" via JS, je pourrais faire :

head=document.getElementsByTagName('head')[0];
link=document.createElement('link');
link.setAttribute('rel',"stylesheet");
link.setAttribute('href',"ma_feuille.css");
link.setAttribute('type',"text/css");
head.appendChild(link);


Tout fonctionne à merveille tant sous IE que sous Firefox. Le fichier CSS contient un p {color :red}, qui fonctionne !

Maintenant prenons le cas d'une iFrame:

<html>
<head>
</head>
<body>
	<p>Exemple de Texte principal<p>
	<iframe id="myiFrame"></iframe>
</body>
</html>

Côté JS, j'aimerais lui appliquer une feuille de style, de la même manière à défaut de savoir comment faire autrement.
Tout d'abord la gestion de l'iFrame :

var richtext='myiFrame';
var browserName = navigator.appName;
window.onload=loadEvent;

function loadEvent() {
	document.getElementById(richtext).style.width = "400px";
	document.getElementById(richtext).style.height = "300px";
	var doc = document.getElementById(richtext).contentWindow.document;

	doc.open();           
	doc.write("<p>Exemple de <b>texte</b> iFrame</p>");
	doc.close();
	doc.body.contentEditable = true;
	doc.designMode = "on";

L'iFrame contient désormais un document où l'on peut saisir des données.
Maintenant, passons à la gestion dans la feuille de style. A la fin de la fonction loadEvent() je rajoute:

	if (browserName == "Microsoft Internet Explorer") {
// Différé pour IE, sinon ça bug car le document ne semble pas chargé
		setTimeout(function() {SetAllFont(richtext)},1);
	}
	else {
		SetAllFont(richtext); // Instantané pour les autres                
	}
}

Puis la fonction SetAllFont(), qui va charger le CSS (la même, dans l'idée, que notre 1er exemple !):

function SetAllFont(n) {
	head=document.getElementById(richtext).contentWindow.document.getElementsByTagName('head')[0];
	link=document.createElement('link');
	link.setAttribute('rel',"stylesheet");
	link.setAttribute('href',"truc.css");
	link.setAttribute('type',"text/css");
	head.appendChild(link);
}


Et là.. sous Mozilla ça marche parfaitement, et sous IE il retourne l'erreur "ARGUMENT NON VALIDE".
Head existe pourtant bien (alert(head.nodeName); à l'appui).
J'ai alors essayé de détruire l'HEAD avec removeChild du HTML, même erreur.
J'ai donc essayé un head.innerHTML, sous MOzilla parfait mais sous IE : "Impossible de définir la propriété innerHTML. Elément cible non valide pour cette opération."


Voilà, quelqu'un aurait-il une idée svp ?
(quand je parle d'IE, je parle d'IE6 pour information)

Au final, je désire juste appliquer une feuille de style à une iFrame, s'il y a plus intelligent comme technique n'hésite pas à me le dire Smiley ravi
Modifié par EureKa (24 Feb 2007 - 00:16)
Voilà, problème résolu.

J'ai opté pour un double code.

Pour IE, incorporation de la balise <link /> dans le doc.write(). Mozilla n'appréciant pas.

Pour Mozilla, création de la balise <link /> via DOM, placée via appendChild(). IE n'appréciant pas cela.

A bientôt (mais pas trop tôt !)