Pasar parámetros a ficheros externos JavaScript

pere . lunes 8 de noviembre de 2010. a las 12:01

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: ,

6 Comentarios
» Feed RSS de los Comentarios

  1. lucas dice:

    Hola como estas?
    disculpa que te moleste pero estoy haciendo algo parecido a tu ejemplo y no consigo que me ande.
    Desde un Servlet donde lleno una variable de session (cli) luego llamo a mi JSP donde ademas de tener todo el codigo tengo las siguientes partes.

    .
    .
    .
    .

    Go

    Y desde el script tengo

    var valor = document.getElementById(“cli”);

    Ahora cuando realizo alert con la variable valor me dice “[object]”

    Tenes una idea de lo que puedo estar haciendo mal?

    cualquier informacion se agradecera.

    desde ya muchas gracias.

  2. lucas dice:

    Perdon donde esta el GO va lo siguiente

    Go

    gracias.

  3. pere dice:

    Hola Lucas,

    Continúo sin ver lo del GO… No te puedo ayudar mucho, pero si te devuelve un [Object] averigua que tipo de objecto es e intenta extraer su información.

    Por otro lado en el post lo que intentamos es que mediante els src del intentamos construir una querystring, y con una expresión regular extraemos los valor String de la querystring…

    Un saludo.

  4. Albertger dice:

    Esto es bastante complejo. Puedes usar getAttribute para tomar el valor de un atributo inventado en la llamada a tu .js y colocar el php en dicho atributo,
    por ejemplo:
    <script id="miid" pase="” src=”el.js”>

    En el.js:
    var locojo=document.getElementById(‘miid’);
    var esmio=locojo.getAttribute(‘pase’);

    Con esto es suficiente….
    Tienes un blog muy chulo…

  5. Fernando dice:

    PROBLEMA:
    necesito pasar tres parametros de una variable al documento .js que tengo y solo consigo que pase uno.

    CONTEXTO DEL PROBLEMA:
    estoy concatenando al documento .js una variable llamada “nombre” la cual almacena a su vez tres parametros de una variable en PHP
    EJ:
    <script type="text/javascript"
    id="identificador_js"
    src="assets/js/js.js?nombre=” >
    y solo recibo uno y los otros dos quedan fuera que debo hacer para conseguir pasar los tres parametros.

  6. leon dice:

    hice lo que propones y no funciona, no sale el alert

Enviar comentario