Rafraichissemant CSS dans une Iframe

**SpaceFrog** · 31/08/2011, 17h05

non avec jquery tu n'auras pas deux balises body !
avec un load par exemple tu ne charges que le contenu du body

**gretch** · 31/08/2011, 17h48

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 :

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

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 :

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

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>

**SpaceFrog** · 31/08/2011, 18h35

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

**Bovino** · 31/08/2011, 19h12

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.

**SpaceFrog** · 31/08/2011, 21h05

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

**Eric2a** · 01/09/2011, 00h31

Salut,

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

iframe.contentDocument;

ou

iframe.contentWindow.document;

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

Code html :

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

**gretch** · 01/09/2011, 11h16

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

en tout cas merci d'avoir essayer de m'aider

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

**gretch** · 01/09/2011, 11h36

ç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 ^^

Rafraichissemant CSS dans une Iframe

JavaScript

Discussions similaires

Partager

Partager