Come passare i parametri a un tag Script?

Ho letto il tutorial Widget fai da te - Come incorporare il tuo sito su un altro sito per XSS Widgets di Dr. Nic.

Sto cercando un modo per passare parametri al tag script. Ad esempio, per fare il seguente lavoro:

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

C'è un modo per fare questo?

Due link interessanti:

• Come incorporare widget Javascript che dipendono da jQuery in un ambiente sconosciuto (discussione Stackoverflow)
• Un articolo sul passaggio di parametri a un tag di script

Mi scuso per aver risposto a una domanda super vecchia ma dopo aver passato un'ora a lottare con le soluzioni di cui sopra ho optato per cose più semplici.

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

All'interno dello script sopra:

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

Molto più semplice dell'analisi di jquery o URL.

Potresti aver bisogno del polyfil per doucment.currentScript dalla risposta di @Yared Rodriguez per IE:

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

È meglio usare la funzionalità negli attributi di dati 5 html5

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

All'interno del file di script http://path.to/widget.js puoi ottenere i paremeters in questo modo:

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

Fatto. Una specie di hack, ma funziona abbastanza bene:

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

Passo i parametri nel tag script come classi:

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

Questo articolo ha aiutato molto.

Un altro modo è usare i meta tag. Qualunque dato debba essere passato al tuo JavaScript può essere assegnato in questo modo:

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

I dati possono quindi essere estratti dai meta tag in questo modo (meglio farlo in un gestore di eventi DOMContentLoaded):

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

Assolutamente nessun problema con jQuery o simili, non sono necessari hack e soluzioni alternative e funziona con qualsiasi versione HTML che supporti i meta tag ...

JQuery ha un modo per passare parametri da HTML a javascript:

Metti questo nel myhtml.htmlfile:

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

Nella stessa directory crea un subscript.jsfile e mettilo lì:

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

Analizza risultato:

Il caricamento della pagina myhtml.html ha la stampa "foobar.mp4" sullo schermo. La variabile denominata video_filename è stata passata da html a javascript. Javascript lo ha stampato sullo schermo e sembrava incorporato nell'html nel genitore.

jsfiddle prova che quanto sopra funziona:

http://jsfiddle.net/xqr77dLt/

Se stai usando jquery potresti prendere in considerazione il loro metodo di dati.

Ho usato qualcosa di simile a quello che stai cercando nella tua risposta, ma in questo modo:

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

Potresti anche creare una funzione che ti consenta di prendere direttamente i parametri GET (questo è quello che uso frequentemente):

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

Grazie a jQuery, una semplice soluzione conforme a HTML5 è creare un tag HTML aggiuntivo, come div, per memorizzare i dati.

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

Demo live con il codice sopra: http://codepen.io/anon/pen/KzzNmQ?editors=1011#0

Nella demo live, è possibile vedere i dati dagli attributi data- * HTML5 da concatenare e stampare nel registro.

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

è un thread molto vecchio, lo so, ma anche questo potrebbe aiutare se qualcuno arriva qui una volta che cerca una soluzione.

Fondamentalmente ho usato document.currentScript per ottenere l'elemento da cui è in esecuzione il mio codice e filtro utilizzando il nome della variabile che sto cercando. L'ho fatto estendendo currentScript con un metodo chiamato "get", quindi saremo in grado di recuperare il valore all'interno di quello script usando:

document.currentScript.get('get_variable_name');

In questo modo possiamo utilizzare l'URI standard per recuperare le variabili senza aggiungere attributi speciali.

Questo è il codice finale

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

Mi stavo dimenticando di IE :) Non potrebbe essere più facile ... Beh, non ho detto che document.currentScript è una proprietà HTML5. Non è stato incluso per diverse versioni di IE (ho provato fino a IE11 e non c'era ancora). Per la compatibilità con IE, ho aggiunto questa parte al codice:

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

Quello che stiamo facendo qui è definire un codice alternativo per IE, che restituisce l'oggetto script corrente, che è richiesto nella soluzione per estrarre i parametri dalla proprietà src. Questa non è la soluzione perfetta per IE poiché ci sono alcune limitazioni; Se lo script viene caricato in modo asincrono. I browser più recenti dovrebbero includere la proprietà ".currentScript".

Spero possa essere d'aiuto.

Crea un attributo che contenga un elenco dei parametri, in questo modo:

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

Quindi, nel tuo JavaScript, ottieni i parametri come un array:

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

Metti i valori di cui hai bisogno da qualche parte in cui l'altro script possa recuperarli, come un input nascosto, quindi estrai quei valori dal loro contenitore quando inizializzi il tuo nuovo script. Potresti persino mettere tutti i tuoi parametri come stringa JSON in un campo nascosto.

Volevo soluzioni che supportassero quanto più possibile i vecchi browser. Altrimenti direi che il metodo currentScript o il metodo degli attributi dei dati sarebbero più eleganti.

Questo è l'unico di questi metodi non ancora menzionato qui. In particolare, se per qualche motivo disponi di grandi quantità di dati, l'opzione migliore potrebbe essere:

memoria locale

/* On the original page, you add an inline JS Script: */
<script>
   localStorage.setItem('data-1', 'I got a lot of data.');
   localStorage.setItem('data-2', 'More of my data.');
   localStorage.setItem('data-3', 'Even more data.');
</script>

/* External target JS Script, where your data is needed: */
var data1 = localStorage.getItem('data-1');
var data2 = localStorage.getItem('data-2');
var data3 = localStorage.getItem('data-3');

localStorage ha un supporto completo per i browser moderni e un supporto sorprendentemente buono anche per i browser più vecchi, tra gli altri a IE 8, Firefox 3,5 e Safari 4 [undici anni fa].

Se non disponi di molti dati, ma desideri comunque un ampio supporto del browser, forse l'opzione migliore è:

Meta tag [di Robidu]

/* HTML: */
<meta name="yourData" content="Your data is here" />

/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

Il difetto di ciò è che il posto corretto per inserire i meta tag [fino all'HTML 4] è nel tag head e potresti non volere questi dati lassù. Per evitare ciò, o inserire meta tag nel corpo, potresti usare:

Paragrafo nascosto

/* HTML: */
<p hidden id="yourData">Your data is here</p>

/* JS: */
var yourData = document.getElementById('yourData').innerHTML;

Per un supporto ancora maggiore del browser, potresti utilizzare una classe CSS invece dell'attributo nascosto:

/* CSS: */
.hidden {
   display: none;
}

/* HTML: */
<p class="hidden" id="yourData">Your data is here</p>

Questa è la soluzione per jQuery 3.4

<script src="./js/util.js" data-m="myParam"></script>

$(document).ready(function () {
    var m = $('script[data-m][data-m!=null]').attr('data-m');
})