Как передать параметры в тег Script? - PullRequest
Новая
       26

Как передать параметры в тег Script?

64 голосов
/ 14 марта 2011

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

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

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

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

ОБНОВЛЕНИЕ: Две интересные ссылки:

Ответы [ 10 ]

85 голосов
/ 15 сентября 2015

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

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

Внутри приведенного выше сценария: 

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

Гораздо проще, чем анализ JQuery ИЛИ URL.

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

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();
55 голосов
/ 21 января 2014

Лучше использовать функцию в 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>
17 голосов
/ 14 марта 2011

Понял.Вроде хак, но он работает довольно хорошо: 

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>

Эта статья помогламного.

11 голосов
/ 25 января 2015

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

Поместите это в файл 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>

В том же каталоге создайте файл 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/

7 голосов
/ 14 марта 2011

Если вы используете 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');
6 голосов
/ 31 августа 2017

Другой способ - использовать метатеги. Любые данные, которые предполагается передать в ваш 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, которая поддерживает метатеги ...

3 голосов
/ 09 марта 2016

Благодаря 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);
    })
});

Демонстрационная версия с кодом выше: http://codepen.io/anon/pen/KzzNmQ?editors=1011#0

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

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

3 голосов
/ 15 мая 2015

это очень старая ветка, я знаю, но это может помочь, если кто-то попадет сюда после поиска решения.

В основном я использовал document.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 :) Это не может быть проще ... Ну, я не упомянул, что document.currentScript является свойством HTML5.Он не был включен для разных версий IE (я тестировал до IE11, и его еще не было).Для совместимости с IE, я добавил эту часть в код: 

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

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

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

2 голосов
/ 14 марта 2011

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

0 голосов
/ 10 марта 2019

Создайте атрибут, который содержит список параметров, например: 

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

Затем в вашем JavaScript получите параметры в виде массива: 

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