Comment puis-je injecter du js dans la balise head ?

Version imprimable

28/05/2010, 13h27
rawsrc

Comment puis-je injecter du js dans la balise head ?

Bonjour,

je n'arrive pas à injecter simplement un code js dans la balise HEAD.
Voici le code en question renvoyé par un serveur PHP :

Code:

<script type="text/javascript" data-idc="123abc">//<![CDATA[ function test() { alert('testabc'); } //]]></script>

La page reçoit parfaitement ce code via un appel AJAX et quand je fais :

Code:

$('head').append(code)

Le DOM n'est pas modifié.

Après plusieurs essais, je suis arrivé à insérer ce code en supprimant le slash de type="text/javascript". Cela marche aussi avec type="text\/javascript" mais le DOM indique du coup exactement type="text\/javascript"
J'ai aussi essayé en terminant par <\/script> mais là pas plus de succès.

Bref, le slash semble poser problème soit à javascript soit à jQuery et certainement à moi :?

Une idée ?
28/05/2010, 17h55
rawsrc

Bon comme on est jamais mieux servi que par soi-même, je vais me répondre 8-)

Effectivement, il semblerait qu'il y ait un souci avec ce genre d'injection, il faut contourner le problème. Injecter la ressource sans le type et ensuite avec jQuery sélectionner les scripts n'ayant pas l'attribut [type] et le définir. Cela donne :

Code:

$('script:not([type])').attr('type', 'text/javascript');

Et voilà le tour est joué. Les scripts injectés à la demande sont disponibles. :ccool:

Au fait, c'est le même problème si vous injectez du css. Il faudra l'injecter sans le type et ensuite faire :

Code:

$('style:not([type])').attr('type', 'text/css');

Allez bon we ;)

Bonsoir.

Je viens de tester votre ajout de JavaScript dans le « head », je ne vois aucun problème.

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
56
57
58
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		/* BASE */
		body {
			background-color:#ffffff;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
			opacity:0.5;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
 	<script>
		$(function(){
			$('head').append('<script type="text/javascript" data-idc="123abc">function hello(str){alert(str);}<\/script>');
		});
 
		$(window).load(function(){
			hello("Bonjour !");
		});
	</script>
</head>
<body>
    <div id="conteneur">
 
    </div> 
</body>  
</html>