Jak przekazać parametry do znacznika skryptu?

Przeczytałem tutorial: http://drnicwilliams.com/2006/11/21/diy-widgets / dla widgetów XSS autorstwa Dr. Nic.

Szukam sposobu na przekazanie parametrów do znacznika script. Na przykład, aby wykonać następujące działanie:

<script src="http://path/to/widget.js?param_a=1&param_b=3">
Czy jest na to sposób?

Aktualizacja: dwa ciekawe linki:

Author: Community, 2011-03-14

9 answers

Przepraszam za odpowiedź na super stare pytanie, ale po spędzeniu godziny na zmaganiu się z powyższymi rozwiązaniami zdecydowałem się na prostsze rzeczy.

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

Wewnątrz powyższego skryptu:

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

Znacznie łatwiejsze niż jQuery lub parsowanie url.

Możesz potrzebować polyfil do doucment.currentScript from @ Yared Rodriguez ' s answer for IE:
document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();
 67
Author: Richard Fox,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-25 13:03:43

Lepiej używać funkcji w html5 5 atrybutów danych

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

Wewnątrz pliku skryptu http://path.to/widget.js możesz uzyskać paremetry w ten sposób:

<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>
 47
Author: OBender,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-19 10:15:19

Rozumiem. Trochę hack, ale działa całkiem nieźle:

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

Przekazuję params w znaczniku script jako klasy:

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

Ten artykuł bardzo pomógł.

 15
Author: Tomer Lichtash,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-25 20:15:05

JQuery ma sposób przekazywania parametrów z HTML do javascript:

Umieść to w pliku myhtml.html:

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

W tym samym katalogu Utwórz plik subscript.js i umieść go tam:

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

Analizuj Wynik:

Ładowanie myhtml.strona html ma Wydruk' foobar.mp4 ' na ekranie. Zmienna o nazwie video_filename została przekazana z html do javascript. Javascript wydrukował go na ekranie i pojawił się jako osadzony w html w rodzic.

Jsfiddle dowód, że powyższe działa:

Http://jsfiddle.net/xqr77dLt/

 9
Author: Eric Leschinski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-25 20:19:55

Jeśli używasz jquery, możesz rozważyć ich metodę danych.

Użyłem czegoś podobnego do tego, co próbujesz w swojej odpowiedzi, ale tak:

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

Możesz również utworzyć funkcję, która pozwala bezpośrednio pobrać GET params (to jest to, czego często używam):

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
Author: Stuart,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-25 20:15:56

Innym sposobem jest użycie meta tagów. Niezależnie od tego, jakie dane mają być przekazane do Twojego JavaScript, można je przypisać w następujący sposób:

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

Dane mogą być następnie pobrane z meta tagów w ten sposób (najlepiej zrobić to w domcontentloaded event handler):

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

Absolutnie bez kłopotów z jQuery lub podobnymi, bez hacków i obejść niezbędnych i działa z każdą wersją HTML, która obsługuje meta tagi...

 5
Author: Robidu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-31 08:11:34

Dzięki jQuery, prostym rozwiązaniem zgodnym z HTML5 jest utworzenie dodatkowego znacznika HTML, takiego jak div, do przechowywania danych.

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 na żywo z powyższym kodem: http://codepen.io/anon/pen/KzzNmQ?editors=1011#0

Na żywo demo, można zobaczyć dane z HTML5 data-* atrybuty do połączenia i wydruku do dziennika.

Źródło: https://api.jquery.com/data/

 3
Author: gagallo7,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-09 00:44:07

Umieść potrzebne wartości w miejscu, gdzie inny skrypt może je pobrać, na przykład ukryte dane wejściowe, a następnie wyciągnij te wartości z kontenera podczas inicjalizacji nowego skryptu. Możesz nawet umieścić wszystkie swoje params jako ciąg JSON w jednym ukrytym polu.

 2
Author: bwest,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-13 21:07:30

To bardzo stary wątek, wiem, ale to też może pomóc, jeśli ktoś tu dotrze, gdy znajdzie rozwiązanie.

Zasadniczo użyłem dokumentu.currentScript, aby uzyskać element, z którego działa mój kod i filtruję za pomocą nazwy zmiennej, której szukam. Zrobiłem to rozszerzając currentScript o metodę o nazwie "get", więc będziemy mogli pobrać wartość wewnątrz tego skryptu za pomocą:

document.currentScript.get('get_variable_name');

W ten sposób możemy użyć standardowego URI do pobrania zmiennych bez dodawania specjalnych atrybutów.

To jest ostateczny kod

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

Zapomniałem o IE :) nie mogło być tak łatwiej... Nie wspomniałem o tym dokumencie.currentScript jest właściwością HTML5. Nie został dołączony do różnych wersji IE(testowałem do IE11 i jeszcze go nie było). Dla kompatybilności IE dodałem tę część do kodu:

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

To, co robimy tutaj, to zdefiniowanie alternatywnego kodu dla IE, który zwraca bieżący skrypt obiekt, który jest wymagany w rozwiązaniu do wyodrębnienia parametrów z właściwości src. Nie jest to idealne rozwiązanie dla IE, ponieważ istnieją pewne ograniczenia; jeśli skrypt jest ładowany asynchronicznie. Nowsze przeglądarki powinny zawierać ".właściwość currentScript".

Mam nadzieję, że to pomoże.
 2
Author: Yared Rodriguez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-25 13:03:25