Pasar parámetros a ficheros externos JavaScript

A veces en nuestras aplicaciones web introducimos mucho código JavaScript que podríamos extraer a un fichero externo .js y mejorar nuestro código en varios factores como organización, depuración, reutilización, etc. Sin embargo, a menudo este JavaScript no lo podemos externalizar porque intercalamos en él programación en lenguaje servidor (en nuestro caso PHP, aunque como siempre cualquiera vale) para dar valor a algunas variables, dar nombres a variables, etc. Por ejemplo:

<script type=’text/javascript’>
alert('<?=$usuario->nombre;?>');
</script>

Lo dicho: si quisiéramos incluir ese código en un .js externo tenemos el problema de cómo no perder el valor que nos proporcionará el PHP en el momento de ejecutarse en servidor.

En realidad, existe una solución muy simple: en vez de cargar un .js cargar un PHP pasándole los parametros y que éste genere código JavaScript:

<script src='generador_javascript.php?nombre=Pedro'></script>

Pero esto no es ideal, ya que nos obliga a generar código desde PHP y sería mejor tener un archivo .js para reutilizarlo a placer y poder localizar futuros errores fácilmente. Lo que queremos es pasarle parámetros al fichero externo JavaScript utilizando el formato que se utiliza en la web para las Query String:

<script type='text/javascript' src='externo.js?par1=valor1&par2=valor2'> </script>

Lo cual plantea la dificultad de cómo recuperar esos valores. En lenguaje JavaScript, ¿existe algún equivalente al $_GET de PHP? La respuesta es no pero sí, aunque no tenemos forma de recoger estos parámetros, siendo astutos podemos utilizar el DOM para acceder a los valores desde el source (src) del tag <script> que carga el archivo Javascript. Para ello lo más sencillo es ponerle un identificador al tag <script>, por ejemplo:

<script type='text/javascript' id='identificador_js' src='externo.js?nombre=<?=$usuario->nombre; ?>' ></script>

Y para recoger los parametros en el .js externo, utilizamos una expresión regular para separar los valores en pares nombre+valor:

//recuperamos la query string
var qs =
document.getElementById("identificador_js").src.match(/\w+=\w+/g);

//array para almacenar las variables
var _GET= {};

var t,i = qs.length;
while (i--) {

     //t[0] nombre del parametro y t[1] su valor
     t = qs[i].split("=");

     //opción 1: a modo de PHP
     _GET[t[0]] = t[1];

    //opción2: variables con el mismo nombre usando eval
    eval('var '+t[0]+'="'+t[1]+'";');
}

//mostrará el nombre 2 veces
alert(_GET['nombre'] + " " + nombre);

Etiquetas: html, javascript