我为Nic博士阅读了教程： http://drnicwilliams.com/2006/11/21/diy-widgets/ for XSS Widgets。
我正在寻找一种将参数传递给脚本标记的方法。例如，要进行以下工作：
<script src="http://path/to/widget.js?param_a=1¶m_b=3">
有办法做到这一点吗？
更新：两个有趣的链接：
答案 0 :(得分：80)
我为回答一个超级老问题道歉，但在花了一个小时摔跤上面的解决方案后，我选择了更简单的东西。
<script src=".." one="1" two="2"></script>
在上面的脚本中：
document.currentScript.getAttribute('one'); //1
document.currentScript.getAttribute('two'); //2
比jquery或url解析容易得多。
您可能需要来自@Yared Rodriguez的IE答案的doucment.currentScript的polyfil：
document.currentScript = document.currentScript || (function() {
var scripts = document.getElementsByTagName('script');
return scripts[scripts.length - 1];
})();
答案 1 :(得分：52)
最好使用html5 5 data Attributes
中的功能<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>
答案 2 :(得分：17)
知道了。有点像黑客，但它的工作非常好：
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];
我将脚本标记中的params作为类传递：
<script src="http://path.to/widget.js" class="2 5 4"></script>
This article帮了很多忙。
答案 3 :(得分：11)
将其放入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页面有＆＃39; foobar.mp4＆＃39;打印到屏幕。名为video_filename的变量从html传递到javascript。 Javascript将其打印到屏幕上，它显示为嵌入到父级的html中。
jsfiddle证明以上工作原理：
答案 4 :(得分：7)
如果您使用的是jquery，可能需要考虑their data method.
我在你的回答中使用了类似你正在尝试的东西，但是像这样：
<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');
答案 5 :(得分：6)
另一种方法是使用元标记。无论将哪些数据传递给您的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版本......
答案 6 :(得分：3)
这是一个非常古老的主题，我知道但如果有人在寻找解决方案后到达这里，这可能会有所帮助。
基本上我使用document.currentScript从我的代码运行的地方获取元素，并使用我正在寻找的变量的名称进行过滤。我用一个名为“get”的方法扩展了currentScript，所以我们可以使用以下方法获取该脚本中的值：
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”属性。
我希望它有所帮助。
答案 7 :(得分：3)
由于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- *属性的数据被连接并打印到日志中。
答案 8 :(得分：2)
将您需要的值放在其他脚本可以检索它们的位置，例如隐藏的输入，然后在初始化新脚本时从其容器中提取这些值。您甚至可以将所有参数作为JSON字符串放入一个隐藏字段中。
答案 9 :(得分：2)
这是 jQuery 3.4
的解决方案<script src="./js/util.js" data-m="myParam"></script>
$(document).ready(function () {
var m = $('script[data-m][data-m!=null]').attr('data-m');
})
答案 10 :(得分：0)
我希望解决方案能尽可能多地支持旧浏览器。否则，我会说currentScript或data attributes方法将是最时尚的。
这是这里尚未提出的仅有的这些方法。特别是，如果由于某种原因您拥有大量数据，那么最好的选择可能是：
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;
这样做的缺点是，将meta标记[直到HTML 4]放置在head标记中的正确位置，并且您可能不希望在此处放置这些数据。为避免这种情况，或将meta标签放入正文，您可以使用：
隐藏的段落
/* HTML: */
<p hidden id="yourData">Your data is here</p>
/* JS: */
var yourData = document.getElementById('yourData').innerHTML;
要获得更多浏览器支持，可以使用CSS类而不是hidden属性：
/* CSS: */
.hidden {
display: none;
}
/* HTML: */
<p class="hidden" id="yourData">Your data is here</p>
答案 11 :(得分：0)
如果你传递没有名字的参数会更简单，就像函数调用一样。
在 HTML 中：
<script src="abc.js" data-args="a,b"></script>
然后，在 JavaScript 中：
const args=document.currentScript.dataset.args.split(',');
现在 args 包含数组 ['a','b']。这假定同步脚本调用。
答案 12 :(得分：-1)
创建一个包含参数列表的属性，如下所示：
<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