Pasar parámetros a archivos JavaScript

Question

A menudo tendré un archivo JavaScript que quiero usar y que requiere que se definan ciertas variables en mi página web.

Entonces el código es algo como esto:

<script type="text/javascript" src="file.js"></script>
<script type="text/javascript">
   var obj1 = "somevalue";
</script>

Pero lo que quiero hacer es:

<script type="text/javascript" 
     src="file.js?obj1=somevalue&obj2=someothervalue"></script>

Probé diferentes métodos y el mejor hasta ahora es analizar la cadena de consulta de esta manera:

var scriptSrc = document.getElementById("myscript").src.toLowerCase();

Y luego busca mis valores.

Me pregunto si hay otra manera de hacer esto sin crear una función para analizar mi cadena.

¿Conocen todos otros métodos?

Answer 1

No se lo recomiendo el uso de variables globales si es posible. Utilizar un espacio de nombres y programación orientada a objetos para pasar sus argumentos a través de un objeto.

Este código pertenece en file.js:

var MYLIBRARY = MYLIBRARY || (function(){
    var _args = {}; // private

    return {
        init : function(Args) {
            _args = Args;
            // some other initialising
        },
        helloWorld : function() {
            alert('Hello World! -' + _args[0]);
        }
    };
}());

Y en el archivo HTML:

<script type="text/javascript" src="file.js"></script>
<script type="text/javascript">
   MYLIBRARY.init(["somevalue", 1, "controlId"]);
   MYLIBRARY.helloWorld();
</script>

Answer 2

Puede pasar parámetros con atributos arbitrarios. Esto funciona de todos los navegadores recientes.

<script type="text/javascript" data-my_var_1="some_val_1" data-my_var_2="some_val_2" src="/js/somefile.js"></script>

Dentro de somefile.js que puede obtener valores de variables pasadas de esta manera:

........

var this_js_script = $('script[src*=somefile]'); // or better regexp to get the file name..

var my_var_1 = this_js_script.attr('data-my_var_1');   
if (typeof my_var_1 === "undefined" ) {
   var my_var_1 = 'some_default_value';
}
alert(my_var_1); // to view the variable value

var my_var_2 = this_js_script.attr('data-my_var_2');   
if (typeof my_var_2 === "undefined" ) {
   var my_var_2 = 'some_default_value';
}
alert(my_var_2); // to view the variable value

... etc ...

Answer 3

Otra idea que me encontré fue la asignación de un “id” al elemento y pasando los argumentos que Datos- atributos *. La etiqueta resultante sería algo como esto:

<script id="helper" data-name="helper" src="helper.js"></script>

La secuencia de comandos podría utilizar el ID de localizar mediante programación en sí y analizar los argumentos. Dada la etiqueta anterior, el nombre podría ser recuperada de esta manera:

var name = document.getElementById("helper").getAttribute("data-name");

obtenemos name = ayudante

Answer 4

Salida este URL. Se está trabajando perfectamente para el requisito.

http://feather.elektrum.org/book/src.html

Muchas gracias al autor. Para tener una referencia rápida Pegué la lógica principal a continuación:

var scripts = document.getElementsByTagName('script');
var myScript = scripts[ scripts.length - 1 ];

var queryString = myScript.src.replace(/^[^\?]+\??/,'');

var params = parseQuery( queryString );

function parseQuery ( query ) {
  var Params = new Object ();
  if ( ! query ) return Params; // return empty object
  var Pairs = query.split(/[;&]/);
  for ( var i = 0; i < Pairs.length; i++ ) {
    var KeyVal = Pairs[i].split('=');
    if ( ! KeyVal || KeyVal.length != 2 ) continue;
    var key = unescape( KeyVal[0] );
    var val = unescape( KeyVal[1] );
    val = val.replace(/\+/g, ' ');
    Params[key] = val;
  }
  return Params;
}

Answer 5

Aquí hay una prueba de concepto muy apresurada.

Estoy seguro de que hay al menos 2 lugares donde se pueden realizar mejoras, y también estoy seguro de que esto no sobreviviría mucho tiempo en la naturaleza.Cualquier comentario para hacerlo más presentable o utilizable es bienvenido.

La clave es establecer una identificación para su elemento de secuencia de comandos.El único inconveniente es que esto significa que solo puede llamar al script una vez, ya que busca esa ID para extraer la cadena de consulta.Esto podría solucionarse si, en cambio, el script recorre todos los elementos de consulta para ver si alguno de ellos apunta a él y, de ser así, utiliza la última instancia de dicho elemento del script.De todos modos, sigamos con el código:

Script que se llama:

window.onload = function() {
//Notice that both possible parameters are pre-defined.
//Which is probably not required if using proper object notation
//in query string, or if variable-variables are possible in js.
var header;
var text;

//script gets the src attribute based on ID of page's script element:
var requestURL = document.getElementById("myScript").getAttribute("src");

//next use substring() to get querystring part of src
var queryString = requestURL.substring(requestURL.indexOf("?") + 1, requestURL.length);

//Next split the querystring into array
var params = queryString.split("&");

//Next loop through params
for(var i = 0; i < params.length; i++){
 var name  = params[i].substring(0,params[i].indexOf("="));
 var value = params[i].substring(params[i].indexOf("=") + 1, params[i].length);

    //Test if value is a number. If not, wrap value with quotes:
    if(isNaN(parseInt(value))) {
  params[i] = params[i].replace(value, "'" + value + "'");
 }

    // Finally, use eval to set values of pre-defined variables:
 eval(params[i]);
}

//Output to test that it worked:
document.getElementById("docTitle").innerHTML = header;
document.getElementById("docText").innerHTML = text;
};

Script llamado a través de la siguiente página:

<script id="myScript" type="text/javascript" 
        src="test.js?header=Test Page&text=This Works"></script>

<h1 id="docTitle"></h1>
<p id="docText"></p>

Answer 6

Se utiliza variables globales: -D.

De esta manera:

<script type="text/javascript">
   var obj1 = "somevalue";
   var obj2 = "someothervalue";
</script>
<script type="text/javascript" src="file.js"></script">

El código JavaScript en el acceso lata '' file.js a obj1 y obj2 sin problema.

editar Sólo quiero añadir que si '' file.js quiere comprobar si obj1 y obj2 incluso han sido declarados se puede utilizar la siguiente función.

function IsDefined($Name) {
    return (window[$Name] != undefined);
}

Espero que esto ayude.

Answer 7

podría ser muy simple

por ejemplo

<script src="js/myscript.js?id=123"></script>
<script>
    var queryString = $("script[src*='js/myscript.js']").attr('src').split('?')[1];
</script>

A continuación, puede convertir consulta cadena en JSON, como a continuación

var json = $.parseJSON('{"' 
            + queryString.replace(/&/g, '","').replace(/=/g, '":"') 
            + '"}');

y luego se puede utilizar como

console.log(json.id);

Answer 8

Esto se puede hacer fácilmente si está utilizando algún tipo de marco Javascript como jQuery. Como tal,

var x = $('script:first').attr('src'); //Fetch the source in the first script tag
var params = x.split('?')[1]; //Get the params

Ahora usted puede utilizar estos parametros por escisión como sus parámetros variables.

El mismo proceso se puede hacer sin ningún tipo de marco, pero tardará un poco más líneas de código.

Answer 9

Bueno, usted podría tener el archivo javascript siendo construido por cualquiera de los lenguajes de scripting, inyección de las variables en el archivo en cada petición. Tendría que decirle a su servidor web no repartir js-archivos de forma estática (utilizando mod_rewrite sería suficiente).

Sea consciente de que a pesar de la pérdida de todo el almacenamiento en caché de estos js-archivos a medida que se alteran constantemente.

adiós.

Answer 10

Niza de preguntas y respuestas creativas pero mi suggetion es hacer que sus métodos paramterized y que debe resolver todos sus problemas y sin ningún tipo de trucos.

si tiene función:

function A()
{
    var val = external_value_from_query_string_or_global_param;
}

Puede cambiar esto a:

function B(function_param)
{
    var val = function_param;
}

creo que este es el enfoque más natural, no es necesario aquí para crear documentación adicional sobre los parámetros del archivo '' y recibirá el mismo. Esta especialmente útil si usted permite que otros desarrolladores utilizar su archivo js.

Answer 11

No, realmente no puedes hacer esto mediante la adición de variables para la porción de cadena de consulta de la dirección URL del archivo JS. Si su escritura la parte de código para analizar la cadena que le molesta, tal vez otra forma sería la de JSON codificar sus variables y ponerlos en algo así como el atributo rel de la etiqueta? No sé cómo esto es válido en cuanto a la validación de HTML, si eso es algo que está muy preocupada. Entonces sólo tiene que encontrar el atributo rel de la secuencia de comandos y luego json_decode eso.

por ejemplo

<script type='text/javascript' src='file.js' rel='{"myvar":"somevalue","anothervar":"anothervalue"}'></script>

Answer 12

No es válido html (no creo) pero parece al trabajo si se crea un atributo personalizado para la etiqueta de script en su página web :

<script id="myScript" myCustomAttribute="some value" ....>

A continuación, acceder al atributo personalizado en el javascript:

var myVar = document.getElementById( "myScript" ).getAttribute( "myCustomAttribute" );

No estoy seguro si esto es mejor o peor que el análisis de la cadena de origen guión.