Как передать параметры тегу скрипта?
Я читал учебник: http://drnicwilliams.com/2006/11/21/diy-widgets/ для XSS виджеты доктором НИЦ.
Я ищу способ передать параметры в теге script. Например, сделать следующую работу:
<script src="http://path/to/widget.js?param_a=1¶m_b=3">
есть ли способ сделать это?
обновление: две интересные ссылки:
9 ответов:
Я извиняюсь за ответ на супер старый вопрос, но после того, как я провел час, борясь с вышеупомянутыми решениями, я выбрал более простые вещи.
<script src=".." one="1" two="2"></script>
внутри выше скрипт:
document.currentScript.getAttribute('one'); //1 document.currentScript.getAttribute('two'); //2
гораздо проще, чем разбор jQuery или url.
вы, возможно, потребуется polyfil на документ.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:
положите это в
myhtml.html
file:<!-- 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 params напрямую (это то, что я часто использую):
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); }) });
демо с кодом выше: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" собственность.
Я надеюсь, что это помогает.