Rafraichissemant CSS dans une Iframe

Version imprimable

Bonjour à tous,

Avant tout je tiens à dire que mon besoin s'applique à un fichier hta
(HTML Application) du coup : Pas de PHP (Niette la pseudo-frame et les variable PHP...)

donc j'en reviens à l'utilisation des Iframes.

mon projet est relativement simple, je construit un générateur CSS, du coup une fois que j'ai sélectionné les parametres de mon generateur,
j'appuis sur un bouton qui est censé creer un fichier CSS (ça pas de prob.) et afficher un exemple dans une I-frame. (c'est là que ça coince)

là problème, j'arrive bien à rafraichir la partie HTML du fichier mais le rafraichissement CSS ne se fait pas.

methode utilisée :

Code:

document.getElementById("exemple").src="./result.htm";

j'ai essayer d'inclure dans le <head> du fichier result.htm ça :
Code:

1 2 3 <meta http-Equiv="Cache-Control" Content="no-cache"> <meta http-Equiv="Pragma" Content="no-cache"> <meta http-Equiv="Expires" Content="0">
rien

j'ai essayer d'inclure dans le <head> du fichier result.htm ça :

Code:

<META http-equiv="Refresh" content="10">

là ça passe mais le rechargement fait remonter l'assenceur(de l'iframe) à chaque rafraichissement... franchement pas pratique...

je suis partis sur une autre piste qui consiste à créer une balise nouvelle <link> là encore, début de résultat mais ça ne marche qu'une fois si on re-clique plus rien.

(puisse qu'il se retrouve avec plusieurs balise <link> seule la derniere s'applique soit la premiere creer !)
Code:

1 2 3 4 5 6 var cssLink = document.createElement("link"); cssLink.href = "./css/custom.css"; cssLink.rel = "stylesheet"; cssLink.type = "text/css"; document.getElementById("exemple").appendChild(cssLink);
problème j'arrive pas à détruire la balise <link> dans mon Iframe !!!
j'ai essayer ça :
Code:

1 2 3 var d=document.getElementById("exemple").getElementsByTagName('link')[0]; d.parentNode.removeChild(d);
mais il me met une erreur style "impossible d'afficher la valeur de la propriété ParentNode"

Du coup ma question :

1 - auriez vous plus simple que la suppression/création de balises pour faire le boulot ?
2 - Sinon, auriez vous un moyen de détruire cette balise link dans l'iframe ?

bon j’espère que j'ai été suffisamment clair...
merci d'avance...

31/08/2011, 13h33
SpaceFrog

un time stamp en paramètre get de l'url ?

sinon ton css est externe ?
c'est sur le fichier css qu'il faut mettre le no cache

Si tu peux,colle un htaccess precisant la non mise en cache de ton fichier css
31/08/2011, 14h41
Sergejack
J'ai l'impression que tu fais trop compliqué.

Je ferais plus simple à ta place, si tu le permets je vais laisser du code faire une partie de l'explication :
Code:

1 2 3 4 5 <form action="monscript.php" target="monIframe"> <input type="submit" value="envoyer" /> </form> <iframe name="monIframe"/>
Note bien : target="monIframe".

Ensuite dans monscript.php je ferais dans cet ordre.

1) (ob_start, header) générer le fichier css (write, ob_flush, ob_clean)
2) (header) envoyer en sortie la page html (qui fait référence au css) (ob_end_flush)
Code:

1 2 3 4 5 6 7 ... <link type="text/css" href="./usercss/0a456d42f.css" media="all"/> ... </head> ... </body>
Après, faudra considérer le nettoyage des fichiers css n'étant plus employés.
31/08/2011, 15h03
gretch

Citation:

Envoyé par sergejack

Ensuite dans monscript.php je ferais dans cet ordre.

1) (ob_start, header) générer le fichier css (write, ob_flush, ob_clean)
2) (header) envoyer en sortie la page html (qui fait référence au css) (ob_end_flush)

oui mais malheureusement :

Citation:

Envoyé par moi

Avant tout je tiens à dire que mon besoin s'applique à un fichier hta
(HTML Application) du coup : Pas de PHP (Niette la pseudo-frame et les variable PHP...)
31/08/2011, 15h09
gretch

Citation:

sinon ton css est externe ?
c'est sur le fichier css qu'il faut mettre le no cache

heu ça va parraitre tres idiot mais je le met ou ??? :aie:

Citation:

Si tu peux,colle un htaccess precisant la non mise en cache de ton fichier css

je connais mal l'utilisation des htaccess mais sauf erreur de ma part sans serveur (php ou autre) derrière il ne sera pas utiliser si ?

Citation:

un time stamp en paramètre get de l'url ?

et changer de fichier CSS à chaque fois ??? :? pas vraiment convaincu... mais bon si je ne trouve rien de mieux je me pencherais sur cette solution.
31/08/2011, 15h15
SpaceFrog

Citation:

je connais mal l'utilisation des htaccess mais sauf erreur de ma part sans serveur (php ou autre) derrière il ne sera pas utiliser si ?

tu n'as pas de serveur pour tes pages web ?????????????????
31/08/2011, 15h17
Sergejack

Tu n'as pas la main sur le code php ?
31/08/2011, 15h24
Bovino

Moi, ce que je ne comprends pas trop, c'est que tu as

Code:

document.getElementById("exemple").src="./result.htm";

j'en conclus donc que "exemple" correspond à la balise iframe. Dans ce cas

Code:

document.getElementById("exemple").appendChild(cssLink);

ne permet pas d'insérer ton CSS dans le contenu de l'iframe mais dans le document parent, c'est-à-dire entre les balises <iframe> et </iframe> et donc accessible uniquement aux navigateurs qui ne reconnaissent pas les iframes :koi:
31/08/2011, 15h30
gretch

Citation:

Tu n'as pas la main sur le code php ?

Citation:

tu n'as pas de serveur pour tes pages web ?????????????????

:roll: heu je crois que je me suis mal fait comprendre...
je crée un fichier HTA (html application) (et non HTM, HTML ou meme PHP)

ce fichier s'execute sans serveur WEB ! il est pour une utilisation LOCAL uniquement.
s'affranchissant du coup de certaine contrainte du à la sécurité WEB (comme l'execution de programme via VBS ou JS ) mais avec quelques contrainte comme le fait qu'il n'y ai pas de "coté serveur" comme pour le developpement d'une page web classique.

si j'avais du PHP, JAMAIS je n'aurais utiliser un Iframe, j'aurais utiliser des pseudo-frame.
31/08/2011, 15h32
SpaceFrog

Pourquoi ne pas passer par jquery et son load ou ajax ???

tu t'exemptes de tout "coté serveur"
31/08/2011, 16h14
gretch

Citation:

j'en conclus donc que "exemple" correspond à la balise iframe.

exactement, dsl en me relisant je remarque que cela n'etait pas clair

Citation:

Code:

document.getElementById("exemple").appendChild(cssLink);

ne permet pas d'insérer ton CSS dans le contenu de l'iframe mais dans le document parent, c'est-à-dire entre les balises <iframe> et </iframe> et donc accessible uniquement aux navigateurs qui ne reconnaissent pas les iframes

là je doit avouer que tu touche une corde sensible, c'est bien possible que ça vienne de la sachant que j'ai bcp de mal avec ce genre de fonction...
que devrais-je tenter à la place ?
31/08/2011, 16h18
gretch

Citation:

Pourquoi ne pas passer par jquery et son load ou ajax ???

bonne question :lol: , par manque de compétences peut etre ^^, nan plus serieusement je ne suis pas tres a l'aise avec AJAX et Jquery et ne sais pas franchement comment les implementer et encore moins dans une Iframe... j'esperais un truc un peu simple quoi ^^

ps : je n'ai pas le code sous la main mais j'essaierai de vous le poster en entier, ce sera plus simple...

Pss: merci à tous d'essayer :ccool: ^^
31/08/2011, 16h19
SpaceFrog

honetement avec jquery et load c'est "fingers in the nose "
plus d'iframe, tu charges tout dans un div
et tu maitrises les styles comme tu veux
31/08/2011, 16h29
gretch

Citation:

plus d'iframe, tu charges tout dans un div

Citation:

j'appuis sur un bouton qui est censé creer un fichier CSS (ça pas de prob.) et afficher un exemple dans une I-frame. (c'est là que ça coince)

mon souci si cela finis dans un div c'est que je ne pourrais pas appliquer la CSS générer mais uniquement la simuler (les propriétés de la balise Body par exemple)...

ce qui m'embete un peu car je comptais rendre souple le contenu de l'exemple (pouvoir y charger n'importe quel fichier HTML et voir à la voler le résultat de la CSS sur l'exemple...)

c'est d'ailleurs une des raisons qui m'a pousser à ne pas utiliser PHP & pseudo-frame (ça et le fait que je le voulais opérationnel OFFLINE)
31/08/2011, 16h32
Sergejack

Citation:

Envoyé par gretch

:roll: heu je crois que je me suis mal fait comprendre...
je crée un fichier HTA (html application) (et non HTM, HTML ou meme PHP)

ce fichier s'execute sans serveur WEB ! il est pour une utilisation LOCAL uniquement.
s'affranchissant du coup de certaine contrainte du à la sécurité WEB (comme l'execution de programme via VBS ou JS ) mais avec quelques contrainte comme le fait qu'il n'y ai pas de "coté serveur" comme pour le developpement d'une page web classique.

si j'avais du PHP, JAMAIS je n'aurais utiliser un Iframe, j'aurais utiliser des pseudo-frame.

lol

Je connaissais pas l'expression html application.
Et quand tu parlais de hta je croyais que tu parlais de htaccess.

Est-ce seulement la bonne partie du forum pour ta question ?
Ce serait peut-être plus à placer dans la partie VBScript.
31/08/2011, 16h34
SpaceFrog

Citation:

mon souci si cela finis dans un div c'est que je ne pourrais pas appliquer la CSS générer mais uniquement la simuler

Je n'ai pas compris ...
je ne vois pas pourquoi tu ne pourrais pas applique un css a une div ...
je ne vois pas pourquoi tu ne pourrais pas non plsu genere un css et l'appliquer ?
31/08/2011, 16h56
gretch
Citation:

je ne vois pas pourquoi tu ne pourrais pas applique un css a une div ...

je m'explique,
dans mon generateur de CSS, je créer la plus simple des CSS genre :

Code:

<body bgcolor="#000000">

là les deux situations :
1. dans mon " Iframe "
  j'applique la CSS generer au fichier result.htm qui est affiché dans mon Iframe. le bgcolor du body de mon Iframe est noir sans intervention de ma part
2. Dans un DIV
  je ne peux pas appliquer directement ma CSS car ma zone d'exemple qui est un div ne peut donc pas contenir de balise BODY car elle est dans mon document maitre (qui d'ailleurs à lui meme une CSS qui n'a absolument rien a voir avec mon problème et qui elle ne doit pas changer)
du coup il faudrait que je re-traite mon fichier CSS afin d'obtenir le résultat attendu (soit le DIV en noir au lieu du body en noir...)
d'ou mon terme 'simuler'.
31/08/2011, 16h57
SpaceFrog

Code:

<body bgcolor="#000000">

c'est pas du css ...

Code:

body {background-color: #000000;}

ensuite avec jquery tu appliques le css que tu veux sur l'element que tu veux ?? je ne vois pas de contre indications
31/08/2011, 16h58
gretch

Citation:

Ce serait peut-être plus à placer dans la partie VBScript.

bah non parce que du coup je fait du JS pas du VBS. (meme si le format le permet.)
31/08/2011, 17h02
gretch

Citation:

<body bgcolor="#000000"> c'est pas du css ...

:aie: la honte ... excuse moi j'ai fait un copier/coller d'un bout de code trouver sans faire gaffe...

effectivement :

Code:

body {background-color: #000000;}

Citation:

je ne vois pas de contre indications

la présence de 2 balise BODY celle de mon generateur et celle de mon exemple.
avec un Iframe pas de souci c'est normal.
31/08/2011, 17h05
SpaceFrog

non avec jquery tu n'auras pas deux balises body !
avec un load par exemple tu ne charges que le contenu du body
31/08/2011, 17h48
gretch
Citation:

non avec jquery tu n'auras pas deux balises body !

sisi c'est un fait (enfin sauf si je passe à coté d'un truc)

je ré-explique (en esperant etre compris ^^)
j'ai un document generateur.hta qui est lié à generateur.css
(qui a donc sa CSS et ses balises HTML, HEAD, BODY...)

j'ai un deuxieme document nommer exemple.html qui est dans mon Iframe, c'est le fichier sur lequel je veux tester la CSS que je crée.
(qui à donc lui aussi sa balise HTML, HEAD, BODY... mais dont la CSS va être générer dynamiquement )

il faut bien comprendre que ce n'est pas la CSS de generateur.hta que je veut changer mais uniquement celle de exemple.html

du coup j'ai bien 2 paires de balises <HTML><HEAD><BODY> (une pour generateur.hta et une pour exemple.html )

ce qui est normal en soit, à condition qu'elle soit dans un I-frame comme cela :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <html> <head></head> <body> <iframe> <html> <head></head> <body></body> </html> </iframe> </body> </html>
les balises vertes sont celle du document generateur.hta celle en rouge sont celle de exemple.htm

si je remplace ça par un div j'aurais donc comme imbrication:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <html> <head></head> <body> <div> <html> <head></head> <body></body> </html> </div> </body> </html>
31/08/2011, 18h35
SpaceFrog

Non absolument pas !
le load de jquery te permet justement de ne charger que ce que tu souhaites, et non l'intégralité de la page !!!!!!!!!!!!!
31/08/2011, 19h12
Bovino

Citation:

Envoyé par SpaceFrog

Non absolument pas !
le load de jquery te permet justement de ne charger que ce que tu souhaites, et non l'intégralité de la page

Ben précisément, il me semble que ce que veux gretch, c'est l'intégralité de la page, pour pouvoir appliquer les styles générés via son script sur une page complète ;)

Pour l'iframe, il faut passer par contentWindow pour retrouver son contenu.
31/08/2011, 21h05
SpaceFrog

si le but est de se compliquer l'existence ...
je ne suis pas fortiche sur le sujet, je laisse quelqu'un d'autre filer un coup de main ...

Salut,

Pour accéder au document de l'iframe, il faut utiliser :

iframe.contentDocument;

iframe.contentWindow.document;

J'ai testé ceci... Si cela peut t'inspirer...

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
<!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" />
	<title>Test</title>
	<script type="text/javascript">//<![CDATA[
                function updateCSS_iframe(filename){
                        var
                                ifr,    // Balise iframe (id='ifrm') du document courant
                                doc,    // Document du cadre
                                hdr,    // Balises head du cadre
                                lnk,    // Balises lnk du cadre
                                i,
                                del=[], // Balises link à supprimer
                                css;    // Balise link à insérer
 
                        ifr=document.getElementById('ifrm');
                        if(ifr.contentDocument)
                                doc=ifr.contentDocument;
                        else if(ifr.contentWindow) // IE
                                doc=contentWindow.document;
 
                        if(!doc)return;
 
                        hdr=doc.getElementsByTagName?doc.getElementsByTagName('head')[0]:null;
                        if(!hdr)return;
 
                        // Supprime les éventuelles feuilles de style
                        lnk=hdr.getElementsByTagName('link');
                        for(i=0;i<lnk.length;i++){
                                if(lnk[i].getAttribute('rel')=='stylesheet')del.push(lnk[i]);
                        }
                        for(i=0;i<del.length;i++)del[i].parentNode.removeChild(del[i]);
 
                        // Ajout de la nouvelle feuille de style
                        css=document.createElement('link');
                        css.href=filename;
                        css.rel='stylesheet';
                        css.type='text/css';
                        css.media='screen';
                        hdr.appendChild(css);
                }
        //]]>
        </script>
</head>
<body>
	<p>
		<button onclick="updateCSS_iframe('red.css');">Rouge</button>
		<button onclick="updateCSS_iframe('green.css');">Vert</button>
		<button onclick="updateCSS_iframe('blue.css');">Bleu</button>
	</p>
 
	<iframe src="test.html" id="ifrm"></iframe>
</body>
</html>

NB : Testé uniquement avec IE8

01/09/2011, 11h16
gretch

Citation:

si le but est de se compliquer l'existence ...
je ne suis pas fortiche sur le sujet, je laisse quelqu'un d'autre filer un coup de main ...

dsl de t'avoir découragé... :oops:
en tout cas merci d'avoir essayer de m'aider :D

Citation:

iframe.contentDocument;

je ne connaissais pas ça peut clairement m'aider :) faut que je teste ! ~~j'aurais pas le temps aujourd'hui~~ mais je vous tiens au jus ^^ merci bcp à tous pour votre patience ^^
01/09/2011, 11h36
gretch

:yaisse: :kiss:
ça marche niquel en .html

j'ai petit souci en format .HTA (ligne 21 ça doit etre le content.window) mais c'est pas bien grave... pour ce projet, tant que je n'ai pas de code coté serveur le format HTML me convient parfaitement.

Merci encore ^^

:resolu: