insertar - llamar funcion javascript desde otro archivo. js
¿Cómo puedo incluir todos los archivos JavaScript en un directorio a través de un archivo JavaScript? (10)
¿Qué hay de usar un script del lado del servidor para generar las líneas de etiqueta del script? En bruto, algo como esto (PHP) -
$handle=opendir("scripts/");
while (($file = readdir($handle))!==false) {
echo ''<script type="text/javascript" src="$file"></script>'';
}
closedir($handle);
Tengo un montón de archivos JavaScript que me gustaría incluir en la página, pero no quiero tener que seguir escribiendo
<script type="text/javascript" src="js/file.js"></script>
Entonces, ¿hay alguna forma de incluir todos los archivos en un directorio (tamaño desconocido)? ¿Puedo hacer algo como ...
$.getScript("js/*.js");
... para obtener todos los archivos de JavaScript en el directorio "js"? ¿Cómo puedo hacer esto usando jQuery?
@jellyfishtree sería mejor si creas un archivo php que incluye todos tus archivos js del directorio y luego solo incluyes este archivo php a través de una etiqueta de script. Esto tiene un mejor rendimiento porque el navegador tiene que hacer menos solicitudes al servidor. Mira esto:
javascripts.php:
<?php
//sets the content type to javascript
header(''Content-type: text/javascript'');
// includes all js files of the directory
foreach(glob("packages/*.js") as $file) {
readfile($file);
}
?>
index.php:
<script type="text/javascript" src="javascripts.php"></script>
¡Eso es!
¡Que te diviertas! :)
Dado que usted quiere una solución 100% del lado del cliente, en teoría, probablemente podría hacer esto:
A través de XmlHttpRequest, obtenga la página de listado de directorio para ese directorio (la mayoría de los servidores web devuelven una lista de archivos si no hay un archivo index.html en el directorio).
Analice ese archivo con javascript, extrayendo todos los archivos .js. Por supuesto, esto será sensible al formato de la lista de directorios en su servidor web / host web.
Agregue las etiquetas de secuencia de comandos dinámicamente, con algo como esto:
function loadScript (dir, file) {
var scr = document.createElement("script");
scr.src = dir + file;
document.body.appendChild(scr);
}
En general, esta no es una gran idea, ya que su archivo html solo debe cargar archivos JS que realmente utilizan. De todos modos, esto sería trivial con cualquier lenguaje de scripting del lado del servidor. Simplemente inserte las etiquetas de script antes de servir las páginas al cliente.
Si desea hacerlo sin utilizar secuencias de comandos del lado del servidor, puede colocar sus archivos JS en un directorio que permita enumerar los contenidos del directorio, y luego usar XMLHttpRequest para leer los contenidos del directorio, y analizar los nombres de los archivos y cargarlos .
La opción n. ° 3 es tener un archivo JS "cargador" que use getScript () para cargar todos los demás archivos. Ponlo en una etiqueta de script en todos tus archivos html, y luego solo necesitas actualizar el archivo de carga cada vez que cargues una nueva secuencia de comandos.
Estaba buscando una respuesta a esta pregunta y tenía mis propios problemas. Encontré un par de soluciones en varios lugares y las reuní en mi propia respuesta preferida.
function exploreFolder(folderURL,options){
/* options: type explaination
**REQUIRED** callback: FUNCTION function to be called on each file. passed the complete filepath
then: FUNCTION function to be called after loading all files in folder. passed the number of files loaded
recursive: BOOLEAN specifies wether or not to travel deep into folders
ignore: REGEX file names matching this regular expression will not be operated on
accept: REGEX if this is present it overrides the `ignore` and only accepts files matching the regex
*/
$.ajax({
url: folderURL,
success: function(data){
var filesLoaded = 0,
fileName = '''';
$(data).find("td > a").each(function(){
fileName = $(this).attr("href");
if(fileName === ''/'')
return; //to account for the (go up a level) link
if(//////.test(folderURL + fileName))
return; //if the url has two consecutive slashes ''//''
if(options.accept){
if(!options.accept.test(fileName))
//if accept is present and the href fails, dont callback
return;
}else if(options.ignore)
if(options.ignore.test(fileName))
//if ignore is present and the href passes, dont callback
return;
if(fileName.length > 1 && fileName.substr(fileName.length-1) === "/")
if(options.recursive)
//only recurse if we are told to
exploreFolder(folderURL + fileName, options);
else
return;
filesLoaded++;
options.callback(folderURL + fileName);
//pass the full URL into the callback function
});
if(options.then && filesLoaded > 0) options.then(filesLoaded);
}
});
}
Entonces puedes llamarlo así:
var loadingConfig = {
callback: function(file) { console.log("Loaded file: " + file); },
then: function(numFiles) { console.log("Finished loading " + numFiles + " files"); },
recursive: true,
ignore: /^NOLOAD/,
};
exploreFolder(''/someFolderURL/'', loadingConfig);
Este ejemplo llamará a esa devolución de llamada en cada archivo / carpeta en la carpeta especificada, excepto en los que comiencen con NOLOAD . Si realmente quieres cargar el archivo en la página, puedes usar esta otra función de ayuda que desarrollé.
function getFileExtension(fname){
if(fname)
return fname.substr((~-fname.lastIndexOf(".") >>> 0) + 2);
console.warn("No file name provided");
}
var loadFile = (function(filename){
var img = new Image();
return function(){
var fileref,
filename = arguments[0],
filetype = getFileExtension(filename).toLowerCase();
switch (filetype) {
case '''':
return;
case ''js'':
fileref=document.createElement(''script'');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
break;
case "css":
fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
break;
case "jpg":
case "jpeg":
case ''png'':
case ''gif'':
img.src = filename;
break;
default:
console.warn("This file type is not supported: "+filetype);
return;
}
if (typeof fileref !== undefined){
$("head").append(fileref);
console.log(''Loaded file: '' + filename);
}
}
})();
Esta función acepta un JS | CSS | (imagen común) archivo y lo carga. También ejecutará los archivos JS. La llamada completa que debe ejecutarse en su secuencia de comandos para cargar todas las imágenes y * hojas de estilo y otras secuencias de comandos podría verse así:
loadingConfig = {
callback: loadfile,
then: function(numFiles) { console.log("Finished loading " + numFiles + " files"); },
recursive: true,
ignore: /^NOLOAD/,
};
exploreFolder(''/someFolderURL/'', loadingConfig);
¡Funciona asombrosamente!
No puede hacer eso en JavaScript, ya que JS se ejecuta en el navegador , no en el servidor, por lo que no sabía nada sobre directorios u otros recursos del servidor.
La mejor opción es usar un script del lado del servidor como el publicado por jellyfishtree.
No puedes hacer eso en Javascript desde el navegador ... Si yo fuera tú, usaría algo como browserify . Escribe tu código usando los módulos de commonjs y luego compila el archivo javascript en uno.
En su html cargue el archivo javascript que compiló.
Otra opción que es bastante corta:
<script type="text/javascript">
$.ajax({
url: "/js/partials",
success: function(data){
$(data).find(''a:contains(.js)'').each(function(){
// will loop through
var partial= $(this).attr("href");
$.getScript( "/js/partials/" + partial, function( data, textStatus, jqxhr ) {});
});
}
});
</script>
Podría usar algo como Grunt Include Source . Le da una buena sintaxis que preprocesa su HTML, y luego incluye lo que desee. Esto también significa que, si configuras tus tareas de compilación correctamente, puedes tener todo esto incluido en el modo dev, pero no en el modo prod, lo cual es genial.
Si no está utilizando Grunt para su proyecto, probablemente haya herramientas similares para Gulp u otros corredores de tareas.
Se puede hacer completamente en el lado del cliente, pero se deben especificar todos los nombres de archivo javascript. Por ejemplo, como elementos de matriz:
function loadScripts(){
var directory = ''script/'';
var extension = ''.js'';
var files = [''model'', ''view'', ''controller''];
for (var file of files){
var path = directory + file + extension;
var script = document.createElement("script");
script.src = path;
document.body.appendChild(script);
}
}