Как передать параметры тегу скрипта?

Я прочитал учебник: http://drnicwilliams.com/2006/11/21/diy-widgets/ для виджетов XSS от Dr.Nic.

Я ищу способ передать параметры в теге script. Например, чтобы сделать следующую работу:

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

есть ли способ сделать это?


UPDATE: две интересные ссылки:

9 ответов


Я извиняюсь за ответ на супер старый вопрос, но, потратив час на борьбу с вышеупомянутыми решениями, я выбрал более простые вещи.

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

внутри выше скрипт:

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

намного проще, чем jQuery или синтаксический анализ url.

вам может понадобиться polyfil для doucment.currentScript из ответа @Yared Rodriguez для IE:

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

лучше использовать функцию в html5 5 данных атрибутов

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

внутри файла сценария http://path.to/widget.js Вы можете получить пареметры таким образом:

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

получил его. Рода хак, но он работает довольно хорошо:

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

Я передаю параметры в тег script как классы:

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

в этой статье очень помогли.


JQuery имеет способ передачи параметров из HTML в javascript:

положите это в :

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

в том же каталоге сделайте subscript.js файл и поместите это туда:

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

Анализируем Результат:

загрузка myhtml.html-страница имеет ' foobar.mp4 ' печать на экран. Переменная video_filename была передана из html в javascript. Javascript напечатал его на экран, и он появился как встроенный в html в родителе.

jsfiddle доказательство того, что выше работает:

http://jsfiddle.net/xqr77dLt/


Если вы используете jquery, вы можете рассмотреть способ данных.

я использовал что-то похожее на то, что вы пытаетесь в своем ответе, но так:

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

вы также можете создать функцию, которая позволяет вам захватывать параметры GET напрямую (это то, что я часто использую):

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

другой способ-использовать мета-теги. Любые данные, которые должны быть переданы на ваш JavaScript, могут быть назначены следующим образом:

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

данные могут быть извлечены из мета-тегов, как это (лучше всего сделать в обработчике событий DOMContentLoaded):

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

абсолютно никаких проблем с jQuery или подобными, никаких хаков и обходных путей, и работает с любой версией HTML, которая поддерживает мета-теги...


благодаря jQuery простым решением, совместимым с HTML5, является создание дополнительного тега HTML, такого как div, для хранения данных.

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 с кодом выше:http://codepen.io/anon/pen/KzzNmQ?editors=1011#0

на демо-версии можно увидеть данные из атрибутов HTML5 data -*, которые будут объединены и напечатаны в журнале.

источник: https://api.jquery.com/data/


поместите нужные значения в место, где другой скрипт может их получить, например скрытый ввод, а затем вытащите эти значения из контейнера при инициализации нового скрипта. Вы даже можете поместить все свои параметры как строку JSON в одно скрытое поле.


Это очень старый поток, я знаю, но это может помочь, если кто-то доберется сюда, как только они ищут решение.

в основном я использовал документ.currentScript, чтобы получить элемент, из которого выполняется мой код, и я фильтрую, используя имя переменной, которую я ищу. Я сделал это, расширяя currentScript с помощью метода "get", поэтому мы сможем получить значение внутри этого скрипта, используя:

document.currentScript.get('get_variable_name');

таким образом, мы можем использовать стандартный URI для извлечения переменные без добавления специальных атрибутов.

Это окончательный код

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

Я забыл о IE:) это не может быть так просто... Я не упоминал об этом документе.currentScript является свойством HTML5. Он не был включен для разных версий IE (я тестировал до IE11, и его еще не было). Для совместимости IE я добавил эту часть в код:

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

то, что мы делаем здесь, чтобы определить некоторый альтернативный код для IE, который возвращает текущий объект скрипта, который требуется в решении для извлечения параметров из свойства src. Это не идеальное решение для IE, так как есть некоторые ограничения; если скрипт загружается асинхронно. Новые браузеры должны включать ".currentScript" собственность.

надеюсь, это поможет.