Código :
Para incluir un script de javascript externo a una pagina web tenemos a disposicion la etiqueta <script> pero dentro del archivo script no tenemos la opción de importar como se puede hacer en css con @import o en php con include o require.Por eso les traigo una solución simple para que podamos importar archivos desde nuestros scripts.
Digamos que tenemos un archivo principal javascript y varios archivos externos que contiene diferentes funciones.
Primero vamos a crear el archivo html principal donde se mostraran los scripts.
index.html
Código :
<!DOCTYPE html> <html> <head></head> <body> <script id="myscript" type="text/javascript" src="js/myscript.js" > </body> </html>
Creamos nuestra etiqueta script y le asignamos un id (Valido en html5 - Compatible con IE7+).
myscript.js
Dentro del archivo myscript.js agregamos estas lineas.
Código :
function import(url){
var script = document.createElement('script');
var parentScript = document.getElementById('myscript');
parentScript = parentScript.src;
parentScript = parentScript.split('/');
parentScript.pop();
parentScript = parentScript.join();
parentScript = parentScript.replace(/,/gi, '/');
script.src = parentScript+url;
var body = document.body;
body.appendChild(script);
}
import('script1.js');
import('script2.js');
import('script3.js');
import('script4.js');
Creamos una función llamada import con parametro url.
Declaramos la variable script la cual crearemos un nuevo elemento script
Código :
var script = document.createElement('script');Seleccionamos el id de nuestra etiqueta script
Código :
var parentScript = document.getElementById('myscript');Seleccionamos la ruta de nuestro script
Código :
parentScript = parentScript.src;
Lo convertimos en array y eliminamos el ultimo valor.
Código :
parentScript = parentScript.split('/');
parentScript.pop();Convertimos nuestro array en string y remplazamos las "," por "/"
Código :
parentScript = parentScript.join(); parentScript = parentScript.replace(/,/gi, '/');
Asignamos a nuestro nuevo elemento la ruta+url y lo creamos en nuestro body
Código :
script.src = parentScript+url; var body = document.body; return body.appendChild(script);
Llamamos a la función con la url de nuestro script a importar
Código :
import('script1.js');
import('script2.js');
import('script3.js');
import('script4.js');
- Nota los archivos a importar deben estar en el mismo directorio o en un subdirectorio no funcionara en un directorio padre.
