Passando parâmetros para arquivos JavaScript

Muitas vezes eu vou ter um arquivo JavaScript que eu quero usar, o que requer que certas variables ​​sejam definidas na minha página web.

Então o código é algo assim:

  var obj1 = "somevalue";  

Mas o que eu quero fazer é:

  

Eu tentei methods diferentes e o melhor ainda é analisar a string de consulta assim:

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

E então procure meus valores.

Gostaria de saber se existe outra maneira de fazer isso sem criar uma function para analisar minha string.

Todos vocês conhecem outros methods?

Eu recomendaria não usar variables ​​globais, se possível. Use um namespace e OOP para passar seus argumentos para um object.

Este código pertence ao arquivo.js:

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

E no seu arquivo html:

   

Você pode passar parâmetros com atributos arbitrários. Isso funciona em todos os navegadores recentes.

  

Dentro de somefile.js você pode obter os valores das variables ​​passadas desta maneira:

……..

 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 …

Outra ideia que encontrei foi atribuir um “id” ao elemento e passar os argumentos como atributos data- *. A tag resultante seria algo como isto:

  

O script poderia então usar o id para se localizar programaticamente e analisar os argumentos. Dada a tag anterior, o nome poderia ser recuperado assim:

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

nós temos nome = ajudante

Confira este URL. Está funcionando perfeitamente para a exigência.

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

Muito obrigado ao autor. Para referência rápida eu colei a lógica principal abaixo:

 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; } 

Aqui está uma prova de conceito muito apressada.

Tenho certeza de que há pelo menos dois lugares onde pode haver melhorias, e também tenho certeza de que isso não sobreviveria por muito tempo na natureza. Qualquer feedback para torná-lo mais apresentável ou utilizável é bem-vindo.

A chave é definir um id para seu elemento de script. A única pegadinha é que isso significa que você só pode chamar o script uma vez, pois ele procura essa ID para puxar a string de consulta. Isso pode ser corrigido se, em vez disso, o script percorrer todos os elementos de consulta para ver se algum deles aponta para ele e, em caso afirmativo, usa a última instância desse elemento de script. De qualquer forma, com o código:

Script sendo chamado:

 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 chamado pela seguinte página:

  

Você usa variables ​​globais :-D.

Como isso:

   

O código JavaScript em 'file.js' pode acessar obj1 e obj1 sem problemas.

EDITAR Só quero acrescentar que se 'file.js' quiser verificar se obj1 e obj1 foram declarados, você pode usar a seguinte function.

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

Espero que isto ajude.

pode ser muito simples

por exemplo

   

Você pode então converter a string de consulta em json como abaixo

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

e depois pode usar como

 console.log(json.id); 

Isso pode ser feito facilmente se você estiver usando algum framework Javascript como o jQuery. Igual a,

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

Agora você pode usar esses parâmetros dividindo seus parâmetros variables.

O mesmo processo pode ser feito sem qualquer estrutura, mas terá mais algumas linhas de código.

Bem, você poderia ter o arquivo javascript sendo construído por qualquer uma das linguagens de script, injetando suas variables ​​no arquivo em cada solicitação. Você teria que dizer ao seu servidor para não distribuir arquivos js estaticamente (usando mod_rewrite seria suficiente).

Esteja ciente de que você perde qualquer cache desses arquivos js como eles são alterados constantemente.

Tchau.

Boa pergunta e respostas criativas, mas minha sugestão é fazer com que seus methods sejam parametrizados e que resolva todos os seus problemas sem nenhum truque.

se você tem function:

 function A() { var val = external_value_from_query_string_or_global_param; } 

você pode mudar isso para:

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

Eu acho que esta é a abordagem mais natural, você não precisa criar documentação extra sobre ‘parâmetros de arquivo’ e você recebe o mesmo. Isso é especialmente útil se você permitir que outros desenvolvedores usem seu arquivo js.

Não, você não pode fazer isso adicionando variables ​​à parte de querystring da URL do arquivo JS. Se ele estiver escrevendo a parte do código para analisar a string que incomoda, talvez de outra maneira seria codificar suas variables ​​e colocá-las em algo como o atributo rel da tag? Eu não sei o quão válido isso é em termos de validação de HTML, se isso é algo que você está muito preocupado. Então você só precisa encontrar o atributo rel do script e então json_decode isso.

por exemplo

  

Não é um html válido (não acho), mas parece funcionar se você criar um atributo personalizado para a tag de script em sua página da Web :

Em seguida, acesse o atributo personalizado no javascript:

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

Não tenho certeza se isso é melhor ou pior do que analisar a string de origem do script.