Rafraichissemant CSS dans une Iframe

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

Voir 40 message(s) de cette discussion en une page