Discussion :

[Mr N.]

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

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

Merci,
Nicolas

[SpaceFrog]

et le contenu du popup est créé dynamiquement ?


fait un

Code :

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

document. createElement('link') ...

et append le dans le head du popup ...

[Mr N.]

Hum bonne piste.

Est ce que je peux copier un node d'un document dom à un autre ?

[SpaceFrog]

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

Code :

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

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

que tu appendes ensuite dans le header du popup

[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

[SpaceFrog]

Code :

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

 getElementsByTagName('link')[indice]

tu dois bien pouvoir repérer le numéro d'ordre de la balise ...

[SpaceFrog]

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

[Mr N.]

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 :

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

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);
		}

[SpaceFrog]

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

Code :

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

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

[Mr N.]

ARGGG
Mon script ne marche pas sous IE... j'ai posté trop vite, trop content de moi

[Mr N.]

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

Code :

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

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

mais quid des feuilles de styles générées dynamiquement par script php ou autre.

[SpaceFrog]

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

peut être un moyen en passant par les rules ?

[SpaceFrog]

peut être une autre piste ...

Code :

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

window.opener.document.styleSheets[]

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

[SpaceFrog]

voilà la structure du lien css ...

Code :

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

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

[Mr N.]

Bon j'ai presque trouvé :

Code :

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

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 ?

[SpaceFrog]

oulà le document.write pouhaa ...

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

netscape4 => 0.5% des surfers ?

[Mr N.]

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

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"
Enfin bref là n'est pas la question... il ne me reste plus qu'à trouver ce getElementByTagName pour Netscape 4 et roule ma poule !

[SpaceFrog]

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

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

[Mr N.]

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 :

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