Chargement d'un script dans un iFrame

**FrankOVD** · 29/02/2012, 17h15

Bonjour,

J''essaie de charger dynamiquement un script dans un document que j'ai chargé dans un iFrame. Malheureusement, il semble que ça ne fonctionne pas de la façon dont je m'y prends. J'ai créé ici trois petits fichiers qui permettent de recréer le problème, je code en JQuery mais il m'importe peu que la solution implique ou non du code JQuery.

index1.html

Code :

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
  <head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<input type="button" value="Bouton #1" onclick="charger_iframe()">
	<body>
</html>

index2.html

Code :

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

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	</head>
	<body>
		<input type="button" value="Bouton #2" onclick="faire_le_test()">
	<body>
</html>

script.js

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
function charger_iframe() {
	var ifrm = $("<iframe>").attr("src","index2.html");
	$(document.body).append(ifrm);
	$(ifrm).load(function() {
		var context = $("iframe").contents();
		var headID = $("HEAD", context);
 
		var newScript = $('<script>');
		$(newScript).attr({"type":"text/javascript","src":"script.js"});
		$(headID).append(newScript);
		alert($(headID).html());
	});
}
 
function faire_le_test() { alert("Ceci est un test"); }

Quelqu'un peut m'aider à ce que je puisse correctement charger script.js dans index2.html à partir de index1.html afin que je puisse exécuter la fonction faire_le_test()?

**NoSmoking** · 29/02/2012, 19h52

Bonjour,
pourquoi ne pas mettre <script type="text/javascript" src="script.js"></script> dans ton fichier index2.html ?

**FrankOVD** · 29/02/2012, 20h29

En fait, le vrai fichier appelé dans le iFrame est en quelque sorte une coquille vide de mon application qui contient la vaste majorité de touts les appels de scripts et de styles. Lorsque je charge un module dans mon application, je charge alors le fichier script.js associé au module afin d'accéder aux méthodes de celui-ci, le fichier script.js est "déchargé" de mon application lorsque je sort du module. Chaque fichier script.js associé à un module déclare quelques fonctions qui ont toutes le même nom d'un fichier à l'autre afin de faciliter la gestion de mes modules par un même noyau, ces fichiers script.js ne peuvent donc pas être chargés simultanément pour cette raison.

J'ai poussé mon application un peu plus loin en permettant de charger certains interfaces dans une fenêtre JQuery grâce un un plugin qui utilise l'objet iFrame pour procéder. Malheureusement, je n'arrive alors plus à charger les méthodes du module dans mon objet en raison du iFrame, ce qui rend jusqu'à maintenant ces fenêtres inutilisables.

Je sais que je pourrais déclarer des objets pour chacun de mes modules et ainsi pouvoir charger tous mes fichiers javascript simultanément, mais ça ne m'a pas semblé justifié jusqu'ici et j'aimerais trouver comment charger un script dans un iFrame pour pouvoir continuer dans la voie que j'ai emprunté à moins que ce ne soit complètement impossible, et j'aimerais alors savoir pourquoi ce serait impossible par simple curiosité.

**FrankOVD** · 29/02/2012, 23h21

Solution trouvée! Elle réside en grande partie dans l'élimination presque totale du framework JQuery dans ma fonction javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function charger_iframe() {
	var ifrm = $("<iframe>").attr("src","index2.html");
	$(ifrm).load(function() {
		var myIframe = $("iframe")[0];
		var script = myIframe.contentWindow.document.createElement("script");
		script.type = "text/javascript";
		script.src = "script.js";
		myIframe.contentWindow.document.body.appendChild(script);
	});
	$(document.body).append(ifrm);
}

Quand rien ne marche, rien ne vaut un bon retour aux sources pour éliminer des variables. Par expérience, JQuery et les iFrame n'ont jamais fait très bon ménage.

Chargement d'un script dans un iFrame

JavaScript

Vue hybride

Discussions similaires

Partager

Partager