Передача параметрів у файли 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();

А потім шукайте мої цінності.

Цікаво, чи є інший спосіб зробити це без побудови функції для розбору мого рядка.

Ви всі знаєте інші методи?

Я рекомендую не використовувати глобальні змінні, якщо це можливо. Використовуйте простір імен та OOP, щоб передати свої аргументи об'єкту.

Цей код належить до 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>

Ви можете передавати параметри з довільними атрибутами. Це працює у всіх останніх браузерах.

<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

... і т.д. ...

Ще одна ідея , яку я натрапив був Призначивши idдо <script>елементу і передаючи аргументи як data-*атрибути. Отриманий <script>тег виглядатиме приблизно так:

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

Потім сценарій може використовувати ідентифікатор для програмного пошуку себе та розбору аргументів. З огляду на попередній <script>тег, ім’я можна отримати так:

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

Отримуємо name=helper

Ознайомтеся з цією 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;
}

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

Сподіваюся, це допомагає.

Ось дуже поспішний доказ концепції.

Я впевнений, що є щонайменше два місця, де можуть бути покращення, і я також впевнений, що це не витримає довго в дикій природі. Будь-який відгук, щоб зробити його більш презентабельним або зручним для використання, вітається.

Ключ - це встановлення ідентифікатора для вашого елемента сценарію. Єдина уловка полягає в тому, що це означає, що ви можете викликати скрипт лише один раз, оскільки він шукає цей ідентифікатор для витягування рядка запиту. Це може бути виправлено, якщо натомість скрипт проходить через усі елементи запиту, щоб побачити, чи хтось із них вказує на нього, і якщо так, використовується останній екземпляр такого елемента сценарію. У будь-якому випадку, з кодом:

Викликається сценарій:

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>

може бути дуже простим

наприклад

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

Це легко зробити, якщо ви використовуєте таку основу Javascript, як jQuery. Так,

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

Тепер ви можете використовувати ці параметри, розділяючи їх як ваші змінні параметри.

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

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

Будьте в курсі, що ви втрачаєте кешування цих js-файлів, оскільки вони постійно змінюються.

До побачення.

Приємне запитання та творчі відповіді, але моя пропозиція полягає в тому, щоб зробити свої методи переосмисленими і це повинно вирішити всі ваші проблеми без жодних хитрощів.

якщо у вас є функція:

function A()
{
    var val = external_value_from_query_string_or_global_param;
}

Ви можете змінити це на:

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

Я думаю, що це найбільш природний підхід, вам не потрібно складати додаткову документацію про "параметри файлу", і ви отримуєте те саме. Це особливо корисно, якщо ви дозволяєте іншим розробникам використовувати ваш js-файл.

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

напр

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

Це недійсний html (я не думаю), але він, здається, працює, якщо створити спеціальний атрибут для тегу сценарію на своїй веб-сторінці :

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

Потім відкрийте спеціальний атрибут у javascript:

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

Не впевнений, що це краще чи гірше, ніж розбирати рядок джерела сценарію.

Якщо вам потрібен спосіб, який передає перевірку CSP (що забороняє небезпечний вбудований), тоді вам доведеться використовувати метод nonce, щоб додати унікальне значення як сценарію, так і директиві CSP або записати свої значення в html та прочитати їх ще раз.

Метод nonce для express.js:

const uuidv4 = require('uuid/v4')

app.use(function (req, res, next) {
  res.locals.nonce = uuidv4()
  next()
})

app.use(csp({
  directives: {
    scriptSrc: [
      "'self'",
      (req, res) => `'nonce-${res.locals.nonce}'`  // 'nonce-614d9122-d5b0-4760-aecf-3a5d17cf0ac9'
    ]
  }
}))

app.use(function (req, res) {
  res.end(`<script nonce="${res.locals.nonce}">alert(1 + 1);</script>`)
})

або записати значення в html-метод. у цьому випадку за допомогою Jquery:

<div id="account" data-email="{{user.email}}"></div>
...


$(document).ready(() => {
    globalThis.EMAIL = $('#account').data('email');
}