Передача параметров в файлы JavaScript - PullRequest
Новая
       14

Передача параметров в файлы JavaScript

141 голосов
/ 03 февраля 2010

Часто у меня будет файл JavaScript, который я хочу использовать, который требует, чтобы определенные переменные были определены на моей веб-странице.

Итак, код выглядит примерно так: 

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

Но я хочу сделать следующее: 

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

Я пробовал разные методы, и лучший из них - разобрать строку запроса следующим образом: 

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

А затем найдите мои значения.

Интересно, есть ли другой способ сделать это без создания функции для анализа моей строки.

Вы все знаете другие методы?

Ответы [ 12 ]

184 голосов
/ 03 февраля 2010

Я бы порекомендовал не использовать глобальные переменные, если это возможно. Используйте пространство имен и ООП для передачи ваших аргументов объекту.

Этот код принадлежит 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]);
        }
    };
}());

А в вашем html файле: 

<script type="text/javascript" src="file.js"></script>
<script type="text/javascript">
   MYLIBRARY.init(["somevalue", 1, "controlId"]);
   MYLIBRARY.helloWorld();
</script>
64 голосов
/ 25 февраля 2013

Вы можете передавать параметры с произвольными атрибутами.Это работает во всех последних браузерах. 

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

Внутри somefile.js вы можете получить значения переданных переменных следующим образом:

........ 

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

... и т.д ...

33 голосов
/ 16 июля 2013

Другая идея, с которой я столкнулся, заключалась в назначении «id» элементу и передаче аргументов в качестве атрибутов data- *. Получившийся тег будет выглядеть примерно так: 

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

Затем сценарий может использовать идентификатор для программного поиска и анализа аргументов. Учитывая предыдущий тег, имя может быть получено следующим образом: 

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

мы получаем имя = помощник

18 голосов
/ 28 июня 2010

Проверьте этот URL. Он отлично работает для требования.

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

Большое спасибо автору. Для быстрого ознакомления я вставил основную логику ниже: 

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;
}
12 голосов
/ 03 февраля 2010

Вот очень поспешное доказательство концепции.

Я уверен, что есть как минимум 2 места, где могут быть улучшения, и я также уверен, что это не продержится долго в дикой природе.Любые отзывы, чтобы сделать его более презентабельным или пригодным для использования, приветствуются.

Ключ задает идентификатор для элемента скрипта.Единственный улов в том, что это означает, что вы можете вызвать скрипт только один раз, так как он ищет этот идентификатор, чтобы получить строку запроса.Это можно исправить, если вместо этого сценарий перебирает все элементы запроса, чтобы увидеть, указывает ли на них какой-либо из них, и если да, то использует последний экземпляр такого элемента сценария.В любом случае, с кодом:

Сценарий вызывается: 

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 id="myScript" type="text/javascript" 
        src="test.js?header=Test Page&text=This Works"></script>

<h1 id="docTitle"></h1>
<p id="docText"></p>
10 голосов
/ 03 февраля 2010

Вы используете глобальные переменные: -D.

Например: 

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

Код JavaScript в файле 'file.js' может без проблем обращаться к obj1 и obj2.

EDIT Просто хочу добавить, что если 'file.js' хочет проверить, были ли объявлены obj1 и obj2, вы можете использовать следующую функцию. 

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

Надеюсь, это поможет.

9 голосов
/ 01 марта 2016

может быть очень простым

например 

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

Затем вы можете преобразовать строку запроса в json, как показано ниже 

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

, а затем использовать как 

console.log(json.id);
6 голосов
/ 03 февраля 2010

Это легко сделать, если вы используете Javascript-фреймворк, например, jQuery. Вот так 

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

Теперь вы можете использовать эти параметры, разделив их как параметры переменной.

Тот же процесс можно выполнить без какой-либо инфраструктуры, но он займет еще несколько строк кода.

1 голос
/ 28 июня 2010

Хороший вопрос и креативные ответы, но я предлагаю сделать ваши методы параметризованными, и это должно решить все ваши проблемы без каких-либо хитростей.

если у вас есть функция: 

function A()
{
    var val = external_value_from_query_string_or_global_param;
}

Вы можете изменить это на: 

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

Я думаю, что это наиболее естественный подход, вам не нужно создавать дополнительную документацию о «параметрах файла», и вы получите то же самое. Это особенно полезно, если вы разрешаете другим разработчикам использовать ваш js-файл.

1 голос
/ 03 февраля 2010

Хорошо, вы можете создать файл javascript любым из языков сценариев, вставляя переменные в файл при каждом запросе.Вы должны указать своему веб-серверу не выгружать js-файлы статически (достаточно использовать mod_rewrite).

Имейте в виду, что вы потеряете любое кэширование этих js-файлов, поскольку они постоянно изменяются.

Bye.

Страница:
...