Rafraichissemant CSS dans une Iframe [Résolu]

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

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

gretch · 31/08/2011, 15h09

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

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.

SpaceFrog · 31/08/2011, 15h15

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

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

Citation:

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

Citation:

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

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 :

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

Citation:

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

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)

Sergejack · 31/08/2011, 16h32

Citation:

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

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 ?

gretch · 31/08/2011, 16h56

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 :

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

SpaceFrog · 31/08/2011, 16h57

Code :

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

<body bgcolor="#000000">

c'est pas du css ...

Code :

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

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

gretch · 31/08/2011, 16h58

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

gretch · 31/08/2011, 17h02

Citation:

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

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

effectivement :

Code :

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

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, 13h33	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 018 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 018 Points : 45 108 Points : 45 108	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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

31/08/2011, 15h24	#8
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 803 Points : 35 803	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 __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

31/08/2011, 15h32	#10
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 018 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 018 Points : 45 108 Points : 45 108	Pourquoi ne pas passer par jquery et son load ou ajax ??? tu t'exemptes de tout "coté serveur" __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

31/08/2011, 16h19	#13
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 018 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 018 Points : 45 108 Points : 45 108	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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

31/08/2011, 16h57	#18
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 018 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 018 Points : 45 108 Points : 45 108	Code : Sélectionner tout - Visualiser dans une fenêtre à part <body bgcolor="#000000"> c'est pas du css ... Code : Sélectionner tout - Visualiser dans une fenêtre à part 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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

31/08/2011, 15h17	#7
Sergejack Membre chevronné Inscription : juillet 2006 Messages : 1 194 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 1 194 Points : 746 Points : 746	Tu n'as pas la main sur le code php ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email