Я прочитал учебник DIY-виджеты - Как разместить ваш сайт на другом сайте для виджетов XSS от Dr. Nic.
Я ищу способ передачи параметров в тег скрипта. Например, чтобы сделать следующую работу:
<script src="http://path/to/widget.js?param_a=1&param_b=3"></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>
Эта статья очень помогла.
Извиняюсь за ответ на старый вопрос, но, проведя часовую борьбу с вышеупомянутыми решениями, я выбрал более простой материал.
<script src=".." one="1" two="2"></script>
Внутри выше script:
document.currentScript.getAttribute('one'); //1
document.currentScript.getAttribute('two'); //2
Гораздо проще, чем jquery OR 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>
Внутри 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>
Поместите это в файл 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 доказательство того, что это работает:
Другой способ - использовать метатеги. Независимо от того, какие данные должны быть переданы на ваш 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, вы можете рассмотреть их метод данных.
Я использовал что-то похожее на то, что вы пытаетесь ответить, но вот так:
<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');
Это очень старый поток, я знаю, но это тоже может помочь, если кто-то приходит сюда, когда они ищут решение.
В основном я использовал document.currentScript, чтобы получить элемент от того, где работает мой код, и я фильтрую имя переменной, которую я ищу. Я сделал это с расширением currentScript с помощью метода "get", поэтому мы сможем получить значение внутри этого script, используя:
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, который возвращает текущий объект script, который требуется в решении для извлечения параметров из свойства src. Это не идеальное решение для IE, поскольку есть некоторые ограничения; Если script загружается асинхронно. Новые браузеры должны включать свойство ".currentScript".
Надеюсь, это поможет.
Благодаря 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
В живой демонстрации можно увидеть данные из атрибутов data- * HTML5, которые будут конкатенированы и напечатаны в журнале.
Источник: https://api.jquery.com/data/
Поместите значения, которые вам нужны где-нибудь, где другой script может их получить, например, скрытый ввод, а затем вытащите эти значения из своего контейнера при инициализации вашего нового script. Вы даже можете поместить все свои параметры как строку JSON в одно скрытое поле.
Создайте атрибут, который содержит список параметров, например:
<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
Я хотел решения с максимально возможной поддержкой старых браузеров. В противном случае я бы сказал, что метод currentScript или атрибуты данных будет наиболее стильным.
Это единственный из этих методов, который здесь еще не раскрыт. В частности, если по какой-то причине у вас есть большие объемы данных, лучшим вариантом может быть:
LocalStorage
/* On the original page, you add an inline JS Script: */
<script>
localStorage.setItem('data-1', 'I got a lot of data.');
localStorage.setItem('data-2', 'More of my data.');
localStorage.setItem('data-3', 'Even more data.');
</script>
/* External target JS Script, where your data is needed: */
var data1 = localStorage.getItem('data-1');
var data2 = localStorage.getItem('data-2');
var data3 = localStorage.getItem('data-3');
localStorage имеет полную поддержку современных браузеров и удивительно хорошую поддержку старых браузеров, в том числе IE 8, Firefox 3,5 и Safari 4 [одиннадцать лет назад].
Если у вас мало данных, но вам все еще нужна обширная поддержка браузера, возможно, лучший вариант:
Метатеги [от Robidu]
/* HTML: */
<meta name="yourData" content="Your data is here" />
/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;
Недостатком этого является то, что правильное место для размещения мета-тегов [вплоть до HTML 4] находится в теге head, и вы можете не захотеть, чтобы эти данные были там. Чтобы избежать этого или поместить метатеги в тело, вы можете использовать:
Скрытый абзац
/* HTML: */
<p hidden id="yourData">Your data is here</p>
/* JS: */
var yourData = document.getElementById('yourData').innerHTML;
Для еще большей поддержки браузера вы можете использовать класс CSS вместо скрытого атрибута:
/* CSS: */
.hidden {
display: none;
}
/* HTML: */
<p class="hidden" id="yourData">Your data is here</p>