appliquer les styles d'un document à un autre

Version imprimable

27/09/2005, 17h37
Mr N.

appliquer les styles d'un document à un autre

Bonjour,

Voilà mon problème:
J'ai une page html, qui contient plusieurs inclusions de styles (<link, <link, ...)

En cliquant sur un lien j'ouvre une popup dont le contenu est généré par js à partir de l'opener (~ popup.document.write). C'est un calendrier.
Jusque là rien de sorcier.

Ce que je voudrais faire, c'est que ma popup contiennent les mêmes styles que l'opener... :roll:

Si vous avez des idées sur comment-qui-faut-faire, je suis preneur.

Merci,
Nicolas
28/09/2005, 09h18
SpaceFrog

et le contenu du popup est créé dynamiquement ?

fait un

Code:

document. createElement('link') ...

et append le dans le head du popup ...
28/09/2005, 09h28
Mr N.

Hum bonne piste.

Est ce que je peux copier un node d'un document dom à un autre ?
28/09/2005, 09h39
SpaceFrog

a priori d'un opener vers un popup je ne vois pas pourquoi ce ne serait pas faisable ...

Code:

var popupcsslink=window.opener.document.getElementById('csslink').cloneNode(true)

que tu appendes ensuite dans le header du popup
28/09/2005, 09h43
Mr N.

Sauf que je ne peux mettre d'id 'csslink' dans le document parent. Je ne peux pas le toucher. Mise a par le js qu'il inclus.
Mais je vais tenter le cloneNode via un getElementsByTagName('link') qui malheureusement me sort tout les link, y compris ceux qui ne sont pas des stylesheets... :s
28/09/2005, 09h48
SpaceFrog

Code:

getElementsByTagName('link')[indice]

tu dois bien pouvoir repérer le numéro d'ordre de la balise ...
28/09/2005, 09h49
SpaceFrog

sinon boucle sur les elements de la collection et teste la valeur du src ... si c'est la bonne tu fais le cloneNode

Citation:

Envoyé par SpaceFrog

sinon boucle sur les elements de la collection et teste la valeur du src ... si c'est la bonne tu fais le cloneNode

Je ne connais pas la valeur du src. Je pourrais vour si il se termine par .css, mais quid des feuilles de styles générées dynamiquement par script php ou autre.
En fait je me veux le plus indépendant possible du document appelant le script.

En tout cas ci-dessous ca marche, sauf que ca m'ajoute les rss, les autres trucs qui sont pas des styles :
Code:

1 2 3 4 5 6 7 8 popup_head = popup_doc.getElementsByTagName('head'); links = document.getElementsByTagName('link'); nblinks = links.length; for(i = 0 ; i < nblinks ; i++) { node = links[i].cloneNode(true); popup_head[0].appendChild(node); }

28/09/2005, 09h57
SpaceFrog
ben il ne te reste plus qu'a teste l'extension ???
Code:

1 2 if(links[i].src.split('.')[1]=='css')
28/09/2005, 09h57
Mr N.

ARGGG
Mon script ne marche pas sous IE... j'ai posté trop vite, trop content de moi :(
28/09/2005, 09h58
Mr N.
Citation:
Envoyé par SpaceFrog

ben il ne te reste plus qu'a teste l'extension ???

Code:

1 2 if(links[i].src.split('.')[1]=='css')
Citation:

Envoyé par Mr N.

mais quid des feuilles de styles générées dynamiquement par script php ou autre.
28/09/2005, 10h01
SpaceFrog

je pense que c'est parceque IE ne réinterprète pas le head ???

peut être un moyen en passant par les rules ?
28/09/2005, 10h07
SpaceFrog

peut être une autre piste ...

Code:

window.opener.document.styleSheets[]
28/09/2005, 10h08
Mr N.

J'était déjà parti sur les rules mais je m'embrouillait quand tu m'as proposé le clone...

Sinon en ce qui concerne les styles j'ai trouvé ça :
http://www.w3.org/TR/html4/present/styles.html#h-14.3.2
J'en déduit que l'attribut rel de link doit contenir stylesheet pour que ce soit une feuille de style... presque trop facile !
28/09/2005, 10h12
SpaceFrog

voilà la structure du lien css ...

Code:

<link id="css1" rel="stylesheet" href="mystyle1.css" type="text/css" media="screen" />

mais là ou je doute avec IE c'est qu'il le réinterprète si il est modifié dynamiquement ...

Bon j'ai presque trouvé :
Code:

1 2 3 4 5 6 7 8 9 10 11 styles = ""; links = document.getElementsByTagName('link'); nblinks = links.length; for(i = 0 ; i < nblinks ; i++) { if (links[i].rel) { if (links[i].rel.match(/stylesheet/i)) { styles += "<link rel=\"stylesheet\" type=\"text/css\" href=\""+links[i].href+"\">"; } } }
ensuite je génère ma popup par, en gros, popup.document.write('<html><head>'+styles+'<....');

Ca marche sous IE et FF mais pas sous Netscape4 :(
grrrrr
Quel est l'équivalent de getElementsByTagName sous N4 ?

28/09/2005, 10h39
SpaceFrog

oulà le document.write pouhaa ...

m'enfin si t'as pas d'autre soluces pour le moment ...

netscape4 => 0.5% des surfers ?
28/09/2005, 10h48
Mr N.

Citation:

Envoyé par SpaceFrog

oulà le document.write pouhaa ...

m'enfin si t'as pas d'autre soluces pour le moment ...

pouhaa, mais c'est la solution qui marche sur tout les browsers... ;)

Citation:

Envoyé par SpaceFrog

netscape4 => 0.5% des surfers ?

Crois mois que si j'avais le choix, il n'y aurait que du FF et IE... Malheureusement quand ta boite persiste à supporter un vieux browser parceque certains de ses clients "ne peuvent pas faire autrement" 8O
Enfin bref là n'est pas la question... il ne me reste plus qu'à trouver ce getElementByTagName pour Netscape 4 et roule ma poule !
28/09/2005, 10h51
SpaceFrog

lol je compatis ...
je code encore quelques page pour IE2 :oops:

je continue néanmoins mes recherches pour la duplication propre ...
juste par curiosité ...

Bon au final j'ai un bout de script pas trop mal, pas trop propre et pas trop pour Netscape 4... Si quelqu'un à ze solution...

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
 
		style_files = '<link rel="stylesheet" type="text/css" href="'+css_theme_file+'">';
		style_inline = "<style type=\"text/css\">\n";
		if (document.getElementsByTagName) {
			links  = document.getElementsByTagName('link');
			styles = document.getElementsByTagName('style');
		} else if (document.all) {
			links  = document.all.tags('link');
			styles = document.all.tags('style');
		} else {
			//N4 can not retrieve links
			links  = null;
			styles = null;
		}
		if (links) {
			nblinks = links.length;
			for(i = 0 ; i < nblinks ; i++) {
				if (links[i].rel) {
					if (links[i].rel.match(/stylesheet/i)) {
						style_files += '<link rel="stylesheet" type="text/css" href="'+links[i].href+'">';
					}
				}
			}
		}
		if (styles) {
			nbstyles = styles.length
			for(i = 0 ; i < nbstyles ; i++) {
				if(styles[i].type.match(/text\/css/i)) {
					style_inline += styles[i].innerHTML+"\n";
				}
			}
		}
		style_inline += "\n</style>";

Code:

1
2
 links  = (document.getElementsByTagName('link')|document.all.tags('link'));
 styles = (document.getElementsByTagName('style')|document.all.tags('style'); )

Citation:
Envoyé par SpaceFrog
Code:

1 2 links = (document.getElementsByTagName('link')|document.all.tags('link')); styles = (document.getElementsByTagName('style')|document.all.tags('style'); )
?
Toujours pas pour Netscape 4... :cry:

dans l'autre sens alors ?

Code:

1
2
links  = (document.all.tags('link')|document.getElementsByTagName('link'));
 styles = (document.all.tags('style')|document.getElementsByTagName('style'); )