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

Часто у меня будет файл 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();

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

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

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

ОТВЕТЫ

Ответ 1

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

Этот код принадлежит файлу 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>

Ответ 2

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

<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

... и т.д...

Ответ 3

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

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

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

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

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

Ответ 4

Проверьте этот 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;
}

Ответ 5

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

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

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

Script:

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 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, вызываемый через следующую страницу:

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

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

Ответ 6

Вы используете глобальные переменные: -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);
}

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

Ответ 7

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

например

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

Ответ 8

Это можно легко сделать, если вы используете некоторую инфраструктуру Javascript, например jQuery. Таким образом,

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

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

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

Ответ 9

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

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

Bye.

Ответ 10

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

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

function A()
{
    var val = external_value_from_query_string_or_global_param;
}

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

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

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

Ответ 11

Нет, вы не можете этого сделать, добавив переменные в строку запроса URL-адреса JS файла. Если его написать часть кода для разбора строки, которая вас беспокоит, возможно, другим способом будет json кодировать ваши переменные и поместить их в нечто вроде атрибута rel тега? Я не знаю, насколько это верно в отношении проверки HTML, если это то, о чем вы очень беспокоитесь. Тогда вам просто нужно найти атрибут rel script, а затем json_decode.

например,

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

Ответ 12

Недействительный html (я не думаю), но кажется, что работает, если вы создаете настраиваемый атрибут для тега script на своей веб-странице:

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

Затем войдите в пользовательский атрибут в javascript:

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

Не уверен, что это лучше или хуже, чем синтаксический анализ исходной строки script.