Rafraichissemant CSS dans une Iframe

**gretch** · 19/05/2011, 19h05

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 :

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

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

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

Code :

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

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 :

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

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

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

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 :

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

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

**SpaceFrog** · 31/08/2011, 13h33

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

**Sergejack** · 31/08/2011, 14h41

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 :

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

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 :

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

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.

**gretch** · 31/08/2011, 15h03

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 :

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

**gretch** · 31/08/2011, 15h09

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

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 ?

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.

**SpaceFrog** · 31/08/2011, 15h15

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

**Sergejack** · 31/08/2011, 15h17

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

**Bovino** · 31/08/2011, 15h24

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

Code :

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

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

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

Code :

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

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

**gretch** · 31/08/2011, 15h30

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

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

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.

**SpaceFrog** · 31/08/2011, 15h32

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

tu t'exemptes de tout "coté serveur"

**gretch** · 31/08/2011, 16h14

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

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

Code :

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

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 ?

**gretch** · 31/08/2011, 16h18

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

bonne question

, 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

^^

**SpaceFrog** · 31/08/2011, 16h19

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

**gretch** · 31/08/2011, 16h29

plus d'iframe, tu charges tout dans un div

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)

**Sergejack** · 31/08/2011, 16h32

Envoyé par gretch

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.

**SpaceFrog** · 31/08/2011, 16h34

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 ?

**gretch** · 31/08/2011, 16h56

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 :

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

<body bgcolor="#000000">

là les deux situations :

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
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'.