Как передать параметры тегу скрипта?
Я прочитал учебник: http://drnicwilliams.com/2006/11/21/diy-widgets/ для виджетов XSS от Dr.Nic.
Я ищу способ передать параметры в теге script. Например, чтобы сделать следующую работу:
<script src="http://path/to/widget.js?param_a=1¶m_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 доказательство того, что выше работает:
Если вы используете 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" собственность.
надеюсь, это поможет.