Javascript 如何将参数传递给脚本标记？

我阅读了Nic博士的XSS小部件教程

我正在寻找一种将参数传递给脚本标记的方法。例如，要执行以下操作：

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

有办法做到这一点吗

---

两个有趣的链接：

• （讨论）

---

将您需要的值放在其他脚本可以检索它们的地方，如隐藏输入，然后在初始化新脚本时从其容器中提取这些值。您甚至可以将所有参数作为JSON字符串放入一个隐藏字段中。

明白了。有点像黑客，但效果相当不错：

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 src="http://path.to/widget.js" class="2 5 4"></script>

---

帮助很大。

如果你使用jQuery，你可能想考虑

我在回答中使用了类似于您尝试的内容，但如下所示：

<script src="http://path.to/widget.js" param_a = "2" param_b = "5" param_c = "4">
</script>

<meta name="yourdata" content="whatever" />
<meta name="moredata" content="more of this" />

---

最好在html5中使用该功能

在脚本文件中，可以通过以下方式获取参数：

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

函数getSyncScriptParams（）{
var scripts=document.getElementsByTagName（'script'）；
var lastScript=scripts[scripts.length-1]；
var scriptName=lastScript；
返回{
宽度：scriptName.getAttribute（'data-width'），
高度：scriptName.getAttribute（'data-height'））
};
}

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>

//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);

分析结果：

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

//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中

jshiddle证明上述方法有效：

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

//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);

---

这是一个非常古老的线程，我知道，但如果有人在搜索解决方案后来到这里，这可能也会有所帮助

基本上，我使用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”属性

---

我希望能有所帮助。

我很抱歉回答了一个非常老的问题，但在花了一个小时思考上述解决方案后，我选择了更简单的东西

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

比jquery或url解析简单得多

您可能需要@Yared Rodriguez的IE答案中的polyfil for doucment.currentScript：

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

---

多亏了jQuery，一个简单的兼容HTML5的解决方案就是创建一个额外的HTML标记，比如div，来存储数据

HTML：

<div id='dataDiv' data-arg1='content1' data-arg2='content2'>
  <button id='clickButton'>Click me</button>
</div>

$(document).ready(function() {
    var fetchData = $("#dataDiv").data('arg1') + 
                    $("#dataDiv").data('arg2') ;

    $('#clickButton').click(function() {
      console.log(fetchData);
    })
});

使用上述代码进行实时演示：

在实时演示中，可以看到HTML5 data-*属性中要连接并打印到日志中的数据

---

来源：

另一种方法是使用元标记。应该传递给JavaScript的任何数据都可以按如下方式分配：

<script src="http://path.to/widget.js" param_a = "2" param_b = "5" param_c = "4">
</script>

<meta name="yourdata" content="whatever" />
<meta name="moredata" content="more of this" />

---

使用jQuery或类似工具绝对没有任何麻烦，无需任何破解和解决方法，并且可以使用任何支持元标记的HTML版本…

创建一个包含参数列表的属性，如下所示：

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

---

我希望解决方案尽可能多地支持旧浏览器。否则的话，我会说要么是最时髦的方法，要么是最时髦的方法

这是这里唯一没有提到的方法。特别是，如果出于某种原因，您拥有大量数据，那么最好的选择可能是：

本地存储

/* 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');

/*在原始页面上，您添加了一个内嵌JS脚本：*/
setItem（'data-1'，'I获得了大量数据'）；
setItem（'data-2'，'我的更多数据'）；
setItem（'data-3'，'甚至更多数据'）；
/*需要数据的外部目标JS脚本：*/
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（11年前）等等

如果您没有很多数据，但仍然需要广泛的浏览器支持，那么最好的选择可能是：

元标记[由Robidu提供]

/* HTML: */
<meta name="yourData" content="Your data is here" />

/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

/*HTML：*/
/*JS:*/
var data1=document.getElementsByName（'yourData'）[0]。内容；

这种方法的缺陷在于，在head标记中放置meta标记（直到HTML4）的正确位置，而您可能不希望将这些数据放在上面。为了避免这种情况，或者在正文中添加元标记，您可以使用：

隐藏段落

/* HTML: */
<p hidden id="yourData">Your data is here</p>

/* JS: */
var yourData = document.getElementById('yourData').innerHTML;

/*HTML：*/

/*JS:*/
var yourData=document.getElementById（'yourData'）.innerHTML；

要获得更多浏览器支持，可以使用CSS类而不是隐藏属性：

/*CSS:*/
.隐藏{
显示：无；
}
/*HTML:*/
您的数据在这里

这是jQuery的解决方案

$（文档）.rea