Importer un fichier .js à partir d'un autre

Version imprimable

17/10/2007, 10h19
doudou_rennes

Importer un fichier .js à partir d'un autre
Bonjour à toutes et à tous,

je travaille actuellement sur un projet utilisant du javascript.

A l'heure actuel, nous avons un fichier .js assez gros (7000 lignes) et nous aimerions l'éclater en plusieurs plus petit.

Ce fichier étant utilisé dans pas mal de page, nous aimerions gardé les import de ce fichiers dans les pages appelante.

J'aimerais savoir s'il y a moyen d'importer d'autre .js à partir de celui ci.

En gros, pour l'instant, nous avons notre gros fichier, et à terme, on aimerais avoir n plus petit fichiers, et que notre gros fichier soit transformé en:
Code:

1 2 3 4 5 6 7 import <petit fichier 1>.js import <petit fichier 2>.js . . . import <petit fichier n>.js
Merci d'avance pour votre aide
17/10/2007, 10h49
SpaceFrog

à part créer dynamiqueemnt une balise script, et encore je n'ai jamais testé ...
17/10/2007, 12h12
d-Rek

Hello,

Regarde mon post : http://www.developpez.net/forums/sho...php?t=427350#2
Ca pourrait t'aider..
17/10/2007, 12h45
SpaceFrog

pas vu de rapport là ... ?

les fonctions sont bien toutes dans des fichiers js séparés ... ?
pas juste un fichier js ...
17/10/2007, 13h59
d-Rek

Effectivement, je voulais mettre un lien vers un autre post où on insère dynamiquement un JS dans une page.
Mea culpa

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
var head = document.getElementsByTagName('head').item(0);
 
var myScripts = new Array( [...tes fichiers...] );
 
foreach(x in myScripts) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = myScripts[x];
script.defer = true;
head.appendChild(script);
}

17/10/2007, 14h36
Shinuza
Citation:
Envoyé par doudou_rennes

Bonjour à toutes et à tous,

je travaille actuellement sur un projet utilisant du javascript.

A l'heure actuel, nous avons un fichier .js assez gros (7000 lignes) et nous aimerions l'éclater en plusieurs plus petit.

Ce fichier étant utilisé dans pas mal de page, nous aimerions gardé les import de ce fichiers dans les pages appelante.

J'aimerais savoir s'il y a moyen d'importer d'autre .js à partir de celui ci.

En gros, pour l'instant, nous avons notre gros fichier, et à terme, on aimerais avoir n plus petit fichiers, et que notre gros fichier soit transformé en:

Code:

1 2 3 4 5 6 7 import <petit fichier 1>.js import <petit fichier 2>.js . . . import <petit fichier n>.js

Merci d'avance pour votre aide
Compile le fichier en local, tu le sépares en différentes parties, et tu merges le tout.

Si tu sers plusieurs fichiers ça va ralentir le chargement de la page, et de beaucoup

Bonjour,

je débute en javasript et j'essaye enfaite de me servir d'une librairie (Syntax highlighter qui importe dix huit fichiers js distincts) pour mettre en valeur du code informatique dans les articles de mon blog, j'ai le même problème j'aimerais alléger mon code en important les fichier js de cette librairie par le bien d'un autre, je trouve votre exemple fort intéressant :
Citation:
Envoyé par Sergejack
Code:

1 2 3 4 5 6 7 8 9 10 11 12 var head = document.getElementsByTagName('head').item(0); var myScripts = new Array( [...tes fichiers...] ); foreach(x in myScripts) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = myScripts[x]; script.defer = true; head.appendChild(script); }
seulement je ne sais pas trop comment m'y prendre, pourriez vous re-editer ce même code dans le contexte d'une exploitation réel par exemple pour importer ces fichiers :
Code:

1 2 3 <script type="text/javascript" src="scripts/shBrushSql.js"></script> <script type="text/javascript" src="scripts/shBrushVb.js"></script> <script type="text/javascript" src="scripts/shBrushXml.js"></script>
Merci d'avance! j'attends votre réponse avec impatience..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
var head = document.getElementsByTagName('head').item(0);
 
var myScripts = new Array( "scripts/shBrushSql.js", "scripts/shBrushVb.js", "scripts/shBrushXml.js");
 
foreach(x in myScripts) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = myScripts[x];
script.defer = true;
head.appendChild(script);
}

01/07/2011, 05h51
hornetbzz

attention cependant, un petit commentaire d'après la bataille pour ce thread intéressant :
au bémol près que foreach n'est pas implémentée dans toutes les versions de js (>1.6 il me semble), et pas forcément comprise de la même façon selon les navigateurs.
Donc préférez peut-être for (var ma_valeur in tableau) ou selon le besoin for(var i=0;i<tableau.length;i++)
01/07/2011, 08h02
Bovino

Oui, d'autant que la syntaxe correcte est

Code:

Array.forEach(callback);

:)

certes :D

Allez, pour la bonne cause, je me fends d'un morceau de code -testé-, ça peut toujours servir car je n'ai pas trouvé grand chose sur le sujet:

HTML : on ajoute une petite div d'insertion du code javascript (utile si vous avez des codes spécifiques à des pages incluses et non à toutes vos pages - sinon à placer dans <head>)

Code:

1
2
3
4
5
6
7
8
<html>
<head>
</head>
<body>
<script type="text/javascript" src="lib/javascript/js_autoload.js" defer></script>
<div id="js_script_goes_here"></div>
</body>
</html>

JAVASCRIPT - code de js_autoload.js

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
/**
 * Import js lib
 * @param js_librairies
 * @returns {Boolean}
 */
function init(){
 
	// lib import
	var myscript_location = document.getElementById('js_script_goes_here');
	/* if (undefined == myscript_location)
			alert('div not found');
		else
			alert('found div : ' + myscript_location);*/
	for (var i=0; i < js_librairies.length ; ++i) {
		var my_script = document.createElement('script');
		my_script.type = 'text/javascript';
		my_script.src = relative_path + js_librairies[i];
		my_script.defer = true;
		myscript_location.appendChild(my_script);
	}
    return false;
}
 
/**
 * Start non intrusive js
 * @param func
 */
function addLoadEvent(func) {
	  var oldonload = window.onload;
	  if (typeof window.onload != 'function') {
	    window.onload = func;
	  } else {
	    window.onload = function() {
	      if (oldonload) {
	        oldonload();
	      }
	      func();
	    };
	  }
}
 
 
// var globales
var relative_path = "lib/javascript/";
var js_librairies = new Array("trim.js", "getElementsByRegExpOnId.js", "htmlspecialchars.js");
 
//ONLOAD
addLoadEvent(init);

02/07/2011, 09h16
hornetbzz
Une petite touche finale pour le plaisir :

On peut ajouter une petite fonction de débogage au script js_autoload.js afin de vérifier que le chargement des scripts s'est bien déroulé :

Pour cela, il suffit d'ajouter le gestionaire d'evenement scriptLoaded dans la boucle de chargement (cf code ci-dessus) :

Code:

my_script.onload = scriptLoaded;

Et de coder ce petit gestionnaire :
Code:

1 2 3 4 5 function scriptLoaded(e) { var oLoadedScript = e.target || e.srcElement; alert ('loaded : ' + oLoadedScript.src); return false; }

je voudrais utiliser ce code pour charger pas mal de js mais j'ai cette erreur :

Code:

Uncaught TypeError: Cannot call method 'appendChild' of null

avec ceci :

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
/**
 * Import js lib
 * @param js_librairies
 * @returns {Boolean}
 */
function init(){
 
	// lib import
	var myscript_location = document.getElementById('js_script_goes_here');
	/* if (undefined == myscript_location)
			alert('div not found');
		else
			alert('found div : ' + myscript_location);*/
	for (var i=0; i < js_librairies.length ; ++i) {
		var my_script = document.createElement('script');
		my_script.type = 'text/javascript';
		my_script.src = relative_path + js_librairies[i];
		my_script.defer = true;
		myscript_location.appendChild(my_script);
                my_script.onload = scriptLoaded;
	}
    return false;
}
 
/**
 * Start non intrusive js
 * @param func
 */
function addLoadEvent(func) {
	  var oldonload = window.onload;
	  if (typeof window.onload != 'function') {
	    window.onload = func;
	  } else {
	    window.onload = function() {
	      if (oldonload) {
	        oldonload();
	      }
	      func();
	    };
	  }
}
 
 
// var globales - liste les js de zurb à charger
var relative_path = "../zurb/js/foundation/";
var js_librairies = new Array("foundation.alerts.js", "foundation.clearing.js", "foundation.cookie.js","foundation.dropdown.js","dummy.js",
"dummy.js","dummy.js","dummy.js","dummy.js","dummy.js","dummy.js","dummy.js","dummy.js","dummy.js");
 
//ONLOAD
addLoadEvent(init);
function scriptLoaded(e) {
	var oLoadedScript = e.target || e.srcElement;
	alert ('loaded : ' + oLoadedScript.src);
	return false;
}

quelle erreur ai-je fait ?

30/05/2013, 17h02
Bovino

Ben... il n'y a aucun élément dans ta page avec l'id js_script_goes_here...
31/05/2013, 11h41
aiphes
en effet maintenant ça fonctionne, j'ai juste un problème de chemin car je dois récupérer le chemin du thème drupal pour le mettre dans la variable path :

Code:

var relative_path = "../sites/all/themes/zurb/js/foundation/";

sous drupal je peux récupérer le chemin avec :
Code:

1 2 3 4 <?php $theme_path = drupal_get_path('theme', 'zurbstarter'); include ($theme_path.'/templates/includes/footer.inc'); ?>
j'ai trouvé ça mais je ne sai spas trop comment l'utiliser :
https://drupal.org/node/1427564#comment-6643530

j'ai avancé mais j'ai une erreur :

Code:

1
2
3
4
5
 
Drupal.behaviors.yourThemeName = function (context) {
  var pathToTheme = Drupal.settings.basePath + "sites/all/themes/";
};
var relative_path = $pathToTheme + "zurb/js/foundation/";

Code:

1
2
Uncaught ReferenceError: $pathToTheme is not defined scripts.js:52
(anonymous function)

31/05/2013, 14h39
aiphes
nouvel essai sans succès mais qui montre une amélioration :
Code:

1 2 var pathToTheme = Drupal.settings.basePath + "sites/all/themes/"; var relative_path = pathToTheme + "zurb/js/foundation/";
Code:

http://d7-grawitz.vmdev/undefinedsites/all/themes/zurb/js/foundation/foundation.dropdown.js 404 (Not Found)