Übergabe von Parametern an JavaScript-Dateien

Oft habe ich eine JavaScript-Datei, die ich verwenden möchte und für die bestimmte Variablen auf meiner Webseite definiert werden müssen.

Der Code sieht also ungefähr so ​​aus:

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

Aber was ich tun möchte ist:

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

Ich habe verschiedene Methoden ausprobiert und die beste ist, die Abfragezeichenfolge wie folgt zu analysieren:

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

Und dann nach meinen Werten suchen.

Ich frage mich, ob es einen anderen Weg gibt, dies zu tun, ohne eine Funktion zum Parsen meiner Zeichenfolge zu erstellen.

Kennen Sie alle andere Methoden?

Ich würde empfehlen, wenn möglich keine globalen Variablen zu verwenden. Verwenden Sie einen Namespace und OOP, um Ihre Argumente an ein Objekt weiterzuleiten.

Dieser Code gehört in 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]);
        }
    };
}());

Und in Ihrer HTML-Datei:

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

Sie können Parameter mit beliebigen Attributen übergeben. Dies funktioniert in allen aktuellen Browsern.

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

In somefile.js können Sie folgende Variablenwerte übergeben:

........

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...

Eine andere Idee, auf die ich stieß, war, iddem <script>Element ein zuzuweisen und die Argumente als data-*Attribute zu übergeben. Das resultierende <script>Tag würde ungefähr so ​​aussehen:

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

Das Skript könnte dann die ID verwenden, um sich programmgesteuert zu lokalisieren und die Argumente zu analysieren. Mit dem vorherigen <script>Tag könnte der Name folgendermaßen abgerufen werden:

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

Wir bekommen name=helper

Überprüfen Sie diese URL. Es funktioniert perfekt für die Anforderung.

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

Vielen Dank an den Autor. Zum schnellen Nachschlagen habe ich die folgende Hauptlogik eingefügt:

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

Sie verwenden globale Variablen :-D.

So was:

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

Der JavaScript-Code in 'file.js' kann problemlos auf obj1und zugreifen obj2.

EDIT Ich will nur hinzufügen , dass , wenn ‚file.js‘ will , wenn überprüfen obj1und obj2haben sogar schon erklärt Ihnen die folgende Funktion verwenden können.

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

Hoffe das hilft.

Hier ist ein sehr überstürzter Proof of Concept.

Ich bin mir sicher, dass es mindestens zwei Stellen gibt, an denen Verbesserungen möglich sind, und ich bin mir auch sicher, dass dies in freier Wildbahn nicht lange überleben würde. Jedes Feedback, um es präsentabler oder benutzerfreundlicher zu machen, ist willkommen.

Der Schlüssel ist das Festlegen einer ID für Ihr Skriptelement. Der einzige Haken ist, dass Sie das Skript nur einmal aufrufen können, da es nach dieser ID sucht, um die Abfragezeichenfolge abzurufen. Dies könnte behoben werden, wenn das Skript stattdessen alle Abfrageelemente durchläuft, um festzustellen, ob eines von ihnen darauf verweist, und wenn ja, die letzte Instanz eines solchen Skriptelements verwendet. Wie auch immer, weiter mit dem Code:

Skript wird aufgerufen:

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

Skript über folgende Seite aufgerufen:

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

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

könnte sehr einfach sein

beispielsweise

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

Sie können dann die Abfragezeichenfolge wie unten beschrieben in json konvertieren

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

und kann dann gerne verwenden

console.log(json.id);

Dies ist einfach möglich, wenn Sie ein Javascript-Framework wie jQuery verwenden. Wie so,

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

Jetzt können Sie diese Parameter verwenden, indem Sie sie als variable Parameter aufteilen.

Der gleiche Vorgang kann ohne Framework ausgeführt werden, erfordert jedoch einige weitere Codezeilen.

Nun, Sie könnten die Javascript-Datei von einer der Skriptsprachen erstellen lassen und Ihre Variablen bei jeder Anforderung in die Datei einfügen. Sie müssten Ihrem Webserver mitteilen, dass er js-Dateien nicht statisch austeilen soll (die Verwendung von mod_rewrite würde ausreichen).

Beachten Sie jedoch, dass Sie das Caching dieser js-Dateien verlieren, da sie ständig geändert werden.

Tschüss.

Schöne Fragen und kreative Antworten, aber mein Vorschlag ist, Ihre Methoden zu parametrisieren, und das sollte alle Ihre Probleme ohne Tricks lösen.

wenn Sie Funktion haben:

function A()
{
    var val = external_value_from_query_string_or_global_param;
}

Sie können dies ändern in:

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

Ich denke, dies ist der natürlichste Ansatz. Sie müssen keine zusätzliche Dokumentation über 'Dateiparameter' erstellen und erhalten dieselbe. Dies ist besonders nützlich, wenn Sie anderen Entwicklern erlauben, Ihre js-Datei zu verwenden.

Nein, Sie können dies nicht wirklich tun, indem Sie dem Querystring-Teil der JS-Datei-URL Variablen hinzufügen. Wenn es darum geht, den Teil des Codes zu schreiben, um die Zeichenfolge zu analysieren, die Sie stört, besteht eine andere Möglichkeit darin, Ihre Variablen durch json zu codieren und sie in etwas wie das rel-Attribut des Tags einzufügen? Ich weiß nicht, wie gültig dies in Bezug auf die HTML-Validierung ist, wenn Sie sich darüber große Sorgen machen. Dann müssen Sie nur noch das rel-Attribut des Skripts finden und dann json_decode.

z.B

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

Es ist kein gültiges HTML (glaube ich nicht), aber es scheint zu funktionieren, wenn Sie ein benutzerdefiniertes Attribut für das Skript-Tag auf Ihrer Webseite erstellen :

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

Greifen Sie dann auf das benutzerdefinierte Attribut im Javascript zu:

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

Ich bin mir nicht sicher, ob dies besser oder schlechter ist als das Parsen der Skriptquellzeichenfolge.

Wenn Sie eine Methode benötigen, die die CSP-Prüfung besteht (die unsichere Inline-Prüfung verhindert), müssen Sie die nonce-Methode verwenden, um sowohl dem Skript als auch der CSP-Direktive einen eindeutigen Wert hinzuzufügen, oder Ihre Werte in den HTML-Code schreiben und erneut lesen.

Nonce-Methode für 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>`)
})

oder schreiben Sie Werte in die HTML-Methode. in diesem Fall mit Jquery:

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


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