Przekazywanie parametrów do plików JavaScript

Często będę mieć plik JavaScript, którego chcę użyć, który wymaga zdefiniowania pewnych zmiennych na mojej stronie internetowej.

Więc kod wygląda mniej więcej tak:

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

Ale chcę zrobić:

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

Wypróbowałem różne metody, a najlepszą z nich jest przeanalizowanie ciągu zapytania w następujący sposób:

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

A potem poszukaj moich wartości.

Zastanawiam się, czy istnieje inny sposób na zrobienie tego bez budowania funkcji analizującej mój ciąg.

Czy wszyscy znacie inne metody?

Jeśli to możliwe, nie zalecałbym używania zmiennych globalnych. Użyj przestrzeni nazw i OOP, aby przekazać swoje argumenty do obiektu.

Ten kod należy do pliku.js:

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

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

A w Twoim pliku html:

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

Możesz przekazywać parametry z dowolnymi atrybutami. Działa to we wszystkich najnowszych przeglądarkach.

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

Wewnątrz somefile.js możesz pobrać wartości zmiennych w następujący sposób:

........

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

...itp...

Innym pomysłem natknąłem został przypisania iddo <script>elementu i przechodzącej argumenty jako data-*atrybutów. Wynikowy <script>tag wyglądałby mniej więcej tak:

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

Skrypt mógłby następnie użyć identyfikatora do programistycznego zlokalizowania siebie i przeanalizowania argumentów. Biorąc pod uwagę poprzedni <script>tag, nazwę można pobrać w następujący sposób:

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

Otrzymujemy name=helper

Sprawdź ten adres URL. Działa idealnie na wymagania.

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

Wielkie dzięki dla autora. Dla szybkiego odniesienia wkleiłem poniżej główną logikę:

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

Używasz zmiennych globalnych :-D.

Lubię to:

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

Kod JavaScript w „file.js” może uzyskać dostęp obj1i obj2bez problemu.

EDIT tylko dodać, że jeśli „” file.js chce sprawdzić, czy obj1i obj2były nawet zadeklarował można użyć następujących funkcji.

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

Mam nadzieję że to pomoże.

Oto bardzo pospieszny dowód słuszności koncepcji.

Jestem pewien, że są co najmniej 2 miejsca, w których można wprowadzić ulepszenia, i jestem też pewien, że nie przetrwało to długo na wolności. Mile widziane są wszelkie uwagi, które sprawią, że będzie on bardziej reprezentacyjny lub użyteczny.

Kluczem jest ustawienie identyfikatora dla elementu skryptu. Jedynym haczykiem jest to, że oznacza to, że możesz wywołać skrypt tylko raz, ponieważ szuka on tego identyfikatora, aby pobrać ciąg zapytania. Można to naprawić, gdyby zamiast tego skrypt przechodził przez wszystkie elementy zapytania, aby sprawdzić, czy któryś z nich do niego wskazuje, a jeśli tak, używa ostatniej instancji takiego elementu skryptu. Tak czy inaczej, z kodem:

Wywoływany skrypt:

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

Skrypt wywołany przez następującą stronę:

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

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

może być bardzo proste

na przykład

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

Następnie możesz przekonwertować ciąg zapytania na json, jak poniżej

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

a następnie może użyć podobnych

console.log(json.id);

Można to łatwo zrobić, jeśli używasz jakiegoś frameworka Javascript, takiego jak jQuery. Tak jak tak

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

Teraz możesz użyć tych parametrów, dzieląc je jako parametry zmiennych.

Ten sam proces można wykonać bez żadnego frameworka, ale zajmie to trochę więcej linii kodu.

Cóż, mógłbyś mieć plik javascript budowany przez dowolny język skryptowy, wstrzykując swoje zmienne do pliku przy każdym żądaniu. Musiałbyś powiedzieć swojemu serwerowi WWW, aby nie rozdzielał plików js statycznie (wystarczy użyć mod_rewrite).

Pamiętaj jednak, że tracisz buforowanie tych plików js, ponieważ są one stale zmieniane.

PA.

Ładne pytanie i kreatywne odpowiedzi, ale moją sugestią jest sparametryzowanie twoich metod, co powinno rozwiązać wszystkie twoje problemy bez żadnych sztuczek.

jeśli masz funkcję:

function A()
{
    var val = external_value_from_query_string_or_global_param;
}

możesz to zmienić na:

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

Myślę, że jest to najbardziej naturalne podejście, nie musisz tworzyć dodatkowej dokumentacji na temat „parametrów plików” i otrzymujesz to samo. Jest to szczególnie przydatne, jeśli pozwolisz innym programistom na używanie Twojego pliku js.

Nie, naprawdę nie możesz tego zrobić, dodając zmienne do części z zapytaniami w adresie URL pliku JS. Jeśli zapisuje część kodu, aby przeanalizować ciąg, który ci przeszkadza, być może innym sposobem byłoby zakodowanie zmiennych w formacie json i umieszczenie ich w czymś podobnym do atrybutu rel tagu? Nie wiem, jak ważne jest to pod względem walidacji HTML, jeśli jest to coś, o co bardzo się martwisz. Następnie wystarczy znaleźć atrybut rel skryptu, a następnie json_decode.

na przykład

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

To nie jest prawidłowy kod HTML (nie sądzę), ale wydaje się, że działa, jeśli utworzysz niestandardowy atrybut dla tagu script na swojej stronie internetowej :

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

Następnie uzyskaj dostęp do atrybutu niestandardowego w javascript:

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

Nie jestem pewien, czy jest to lepsze, czy gorsze niż analiza ciągu źródłowego skryptu.

Jeśli potrzebujesz sposobu, który przechodzi sprawdzanie CSP (który zabrania niebezpiecznego inline), musisz użyć metody nonce, aby dodać unikalną wartość zarówno do skryptu, jak i dyrektywy CSP lub zapisać swoje wartości w html i przeczytać je ponownie.

Metoda nonce dla 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>`)
})

lub zapisz wartości do metody html. w tym przypadku przy użyciu Jquery:

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


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