如何将参数传递给Script标签？

Question

我读了教程: http://drnicwilliams.com/2006/11/21/diy-widgets/由Nic博士为XSS Widgets提供.

我正在寻找一种将参数传递给脚本标签的方法.例如,要进行以下工作:

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

有没有办法做到这一点？

---

更新:两个有趣的链接:

• 如何将依赖于jQuery的Javascript小部件嵌入到未知环境中(Stackoverflow讨论)
• 关于将参数传递给脚本标记的文章

Answer 1

我为回答一个超级老问题道歉,但在花了一个小时与上述解决方案搏斗后,我选择了更简单的东西.

<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];
})();

Answer 2

最好在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>

Answer 3

得到它了.一种黑客,但它的工作非常好:

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>

这篇文章帮了很多忙.

Answer 4

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>

在同一个目录中创建一个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证明上述工作:

http://jsfiddle.net/xqr77dLt/

Answer 5

另一种方法是使用元标记.无论将哪些数据传递给您的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版本......

Answer 6

如果您使用的是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');

Answer 7

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

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

我希望它有帮助。

Answer 8

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

<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

Answer 9

感谢 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/