wake-up-neo.com

Wie übergebe ich Parameter an ein Script-Tag?

Ich habe das Tutorial gelesen: http://drnicwilliams.com/2006/11/21/diy-widgets/ für XSS Widgets von Dr. Nic.

Ich suche nach einer Möglichkeit, Parameter an das Skript-Tag zu übergeben. Zum Beispiel, um die folgende Arbeit zu machen:

<script src = "http: //path/to/widget.js? param_a = 1 & param_b = 3">

Gibt es eine Möglichkeit, dies zu tun?


UPDATE: Zwei interessante Links:

65
Tomer Lichtash

Ich habs. Ein bisschen hacken, aber es funktioniert ziemlich gut:

var params = document.body.getElementsByTagName('script');
query = params[0].classList;
var param_a = query[0];
var param_b = query[1];
var param_c = query[2];

Ich übergebe die Parameter im Skript-Tag als Klassen:

<script src="http://path.to/widget.js" class="2 5 4"></script>

Dieser Artikel hat sehr geholfen.

16
Tomer Lichtash

Ich entschuldige mich für die Beantwortung einer super alten Frage, aber nachdem ich eine Stunde mit den oben genannten Lösungen gerungen hatte, entschied ich mich für einfachere Sachen.

<script src=".." one="1" two="2"></script>

Innerhalb des obigen Skripts:

document.currentScript.getAttribute('one'); //1
document.currentScript.getAttribute('two'); //2

Viel einfacher als jquery OR url parsing.

Möglicherweise benötigen Sie die polyfil für doucment.currentScript aus @Yared Rodriguez 'Antwort für IE:

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();
85
Richard Fox

Es ist besser, die Funktion in html5 5 Datenattribute zu verwenden

<script src="http://path.to/widget.js" data-width="200" data-height="200">
</script>

In der Skriptdatei http://path.to/widget.js können Sie die Parameter folgendermaßen abrufen:

<script>
function getSyncScriptParams() {
         var scripts = document.getElementsByTagName('script');
         var lastScript = scripts[scripts.length-1];
         var scriptName = lastScript;
         return {
             width : scriptName.getAttribute('data-width'),
             height : scriptName.getAttribute('data-height')
         };
 }
</script>
55
OBender

JQuery kann Parameter von HTML an Javascript übergeben:

Schreibe dies in das myhtml.html file:

<!-- Import javascript -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Invoke a different javascript file called subscript.js -->
<script id="myscript" src="subscript.js" video_filename="foobar.mp4">/script>

Machen Sie im selben Verzeichnis ein subscript.js Datei und geben Sie diese ein:

//Use jquery to look up the tag with the id of 'myscript' above.  Get 
//the attribute called video_filename, stuff it into variable filename.
var filename = $('#myscript').attr("video_filename");

//print filename out to screen.
document.write(filename);

Analyseergebnis:

Beim Laden der Seite "myhtml.html" wird "foobar.mp4" auf dem Bildschirm angezeigt. Die Variable video_filename wurde von HTML an Javascript übergeben. Javascript druckte es auf dem Bildschirm aus und es erschien eingebettet in das HTML im übergeordneten Element.

jsfiddle Beweis, dass das oben genannte funktioniert:

http://jsfiddle.net/xqr77dLt/

10
Eric Leschinski

Eine andere Möglichkeit ist die Verwendung von Meta-Tags. Alle Daten, die an Ihr JavaScript übergeben werden sollen, können wie folgt zugewiesen werden:

<meta name="yourdata" content="whatever" />
<meta name="moredata" content="more of this" />

Die Daten können dann wie folgt aus den Meta-Tags abgerufen werden (am besten in einem DOMContentLoaded-Ereignishandler):

var data1 = document.getElementsByName('yourdata')[0].content;
var data2 = document.getElementsByName('moredata')[0].content;

Absolut kein Ärger mit jQuery oder Ähnlichem, keine Hacks und Workarounds erforderlich, und funktioniert mit jeder HTML-Version, die Meta-Tags unterstützt ...

7
Robidu

Wenn Sie jquery verwenden, sollten Sie ihre Datenmethode berücksichtigen

Ich habe etwas Ähnliches verwendet, wie Sie es in Ihrer Antwort versucht haben, aber so:

<script src="http://path.to/widget.js" param_a = "2" param_b = "5" param_c = "4">
</script>

Sie können auch eine Funktion erstellen, mit der Sie die GET-Parameter direkt abrufen können (diese Funktion verwende ich häufig):

function $_GET(q,s) {
    s = s || window.location.search;
    var re = new RegExp('&'+q+'=([^&]*)','i');
    return (s=s.replace(/^\?/,'&').match(re)) ? s=s[1] : s='';
}

// Grab the GET param
var param_a = $_GET('param_a');
7
rg88

es ist ein sehr alter Thread, ich weiß, aber das könnte auch helfen, wenn jemand hier ankommt, wenn er nach einer Lösung sucht.

Grundsätzlich habe ich document.currentScript verwendet, um das Element zu ermitteln, von dem aus mein Code ausgeführt wird, und filtere anhand des Namens der gesuchten Variablen. Ich habe currentScript mit einer Methode namens "get" erweitert, damit wir den Wert in diesem Skript abrufen können, indem wir Folgendes verwenden:

document.currentScript.get('get_variable_name');

Auf diese Weise können wir den Standard-URI verwenden, um die Variablen abzurufen, ohne spezielle Attribute hinzuzufügen.

Dies ist der endgültige Code

document.currentScript.get = function(variable) {
    if(variable=(new RegExp('[?&]'+encodeURIComponent(variable)+'=([^&]*)')).exec(this.src))
    return decodeURIComponent(variable[1]);
};

Ich habe vergessen, über IE :) Es könnte nicht einfacher sein ... Nun, ich habe nicht erwähnt, dass document.currentScript eine HTML5-Eigenschaft ist. Es wurde nicht für verschiedene Versionen von IE (Ich habe bis IE11 getestet und es war noch nicht da.) Für IE Kompatibilität, habe ich diesen Teil hinzugefügt zum Code:

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();

Wir definieren hier einen alternativen Code für den IE, der das aktuelle Skriptobjekt zurückgibt, das in der Lösung zum Extrahieren von Parametern aus der Eigenschaft src erforderlich ist. Dies ist nicht die perfekte Lösung für IE da es einige Einschränkungen gibt; Wenn das Skript asynchron geladen wird. Neuere Browser sollten die Eigenschaft ".currentScript" enthalten.

Ich hoffe, es hilft.

3
Yared Rodriguez

Dank der jQuery besteht eine einfache HTML5-kompatible Lösung darin, ein zusätzliches HTML-Tag wie div zu erstellen, um die Daten zu speichern.

[~ # ~] html [~ # ~] :

<div id='dataDiv' data-arg1='content1' data-arg2='content2'>
  <button id='clickButton'>Click me</button>
</div>

JavaScript :

$(document).ready(function() {
    var fetchData = $("#dataDiv").data('arg1') + 
                    $("#dataDiv").data('arg2') ;

    $('#clickButton').click(function() {
      console.log(fetchData);
    })
});

Live-Demo mit dem obigen Code: http://codepen.io/anon/pen/KzzNmQ?editors=1011#

In der Live-Demo können Sie die Daten aus HTML5-Datenattributen sehen, die verkettet und im Protokoll ausgedruckt werden müssen.

Quelle: https://api.jquery.com/data/

3
gagallo7

Platzieren Sie die benötigten Werte an einem Ort, an dem das andere Skript sie abrufen kann, wie eine versteckte Eingabe, und ziehen Sie diese Werte dann aus ihrem Container, wenn Sie Ihr neues Skript initialisieren. Sie können sogar alle Ihre Parameter als JSON-Zeichenfolge in ein verstecktes Feld einfügen.

2
bwest

Erstellen Sie ein Attribut, das eine Liste der Parameter enthält, wie folgt:

<script src="http://path/to/widget.js" data-params="1, 3"></script>

Rufen Sie dann in Ihrem JavaScript die Parameter als Array ab:

var script = document.currentScript || 
/*Polyfill*/ Array.prototype.slice.call(document.getElementsByTagName('script')).pop();

var params = (script.getAttribute('data-params') || '').split(/, */);

params[0]; // -> 1
params[1]; // -> 3
0