[IE7 + javascript]Ajouter des balises dans le head d'un popup

**Macintoc** · 16/10/2007, 12h26

Salut !

Pour imprimer une page, j'ouvre une nouvelle fenêtre dans laquelle j'importe le code HTML et CSS à imprimer depuis la fenêtre mère (par clonage de nœud).

Le problème, c'est que IE semble refuser de modifier le contenu de la balises head du popup lorsque cette modification est effectuée par un script de la fenêtre mère.

Un peu de code pour aider :

page contenant les données à imprimer:

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
<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Document sans nom</title>
 
		<link type="text/css" rel="stylesheet" href="print.css" />
		<script type="text/javascript" src="print.js"></script>
	</head>
 
	<body>
		<div id="print">Hello World à imprimer</div>
		<div>Hello World à ne pas imprimer</div>
	</body>
</html>

CSS associé :

Code :

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

1
2
3
4
5
6
7
8
9
div{
	font-size:1.5em;
	font-weight:bold;
	text-align:center;
}
 
div#print:hover{
	cursor:pointer;
}

le javascript (spécifique à IE, histoire de faciliter la lecture) :

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
var print=function(){		
	var printWindow=window.open('printBase.html');
 
	var css=document.getElementsByTagName('link')[0].cloneNode(true);
	var html=document.getElementsByTagName('div')[0].cloneNode(true);
 
	var addNode=function(newCss, newHtml){
		printWindow.document.documentElement.firstChild.innerHTML+=newCss.outerHTML;
		printWindow.document.documentElement.lastChild.innerHTML+=newHtml.outerHTML;
	}
 
	printWindow.attachEvent('onload', function(){addNode(css, html)});
}
 
var init=function(){	
	document.getElementById('print').attachEvent('onclick', print);
}
 
window.attachEvent('onload', init);

et la page servant de base à l'impression :

Code :

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

1
2
3
4
5
6
7
8
9
10
<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Document sans nom</title>
	</head>
 
	<body>
	</body>
</html>

Accessoirement, si quelqu'un sait comment modifier le doctype d'une page, ça m'éviterais de devoir faire appel à ce dernier fichier.

Donc voilà, si quelqu'un a une idée pour forcer IE ajouter cette balise link dans le head du popup, je suis preneur

**d-Rek** · 16/10/2007, 12h43

Euh.. ajouter une balise dans le head :

Code :

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

1
2
3
4
5
6
7
8
function insert()
    var html_doc = document.getElementsByTagName('head')[0];
    var ins = document.createElement('link');
    ins.setAttribute('type', 'text/css');
    ins.setAttribute('rel', 'stylesheet');
    ins.setAttribute('href', 'js/ma_feuille.css');
    html_doc.appendChild(ins);
}

Cette fonction peut être dans ton popup.. Tu pourrais la déclencher "à distance" avec des param dans l'URL, sur le Onload ?

**Macintoc** · 16/10/2007, 13h47

Ca marche. En déclarant addNode dans printWindow, IE accepte d'insérer le link dans le header.

La fonction print devient alors :

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
var print=function(){		
	var printWindow=window.open('printBase.html');
 
	var css=document.getElementsByTagName('link')[0].cloneNode(true);
	var html=document.getElementsByTagName('div')[0].cloneNode(true);
 
	printWindow.addNode=function(){
		var linkTag=printWindow.document.createElement('link');
		linkTag.setAttribute('type', 'text/css');
		linkTag.setAttribute('rel', 'stylesheet');
		linkTag.setAttribute('href', css.getAttribute('href'));
 
		printWindow.document.documentElement.firstChild.appendChild(linkTag);
		printWindow.document.documentElement.lastChild.innerHTML+=html.outerHTML;
	}
 
	printWindow.attachEvent('onload', printWindow.addNode);
}

Je laisse le innerHTML comme ça pour le contenu HTML (je penses que le appendChild foire à cause des évènements que IE clone en même temps que les balises), je penses que c'est moins lourd que si je devais recréer toutes les balises (et puis ce code reste spécifique à IE).

Merci ^^

[IE7 + javascript]Ajouter des balises dans le head d'un popup

JavaScript

Vue hybride

Discussions similaires

Partager

Partager