如何向脚本标记传递参数？

我阅读了 Nic 博士的 XSS 小部件教程 DIY 小工具-如何将你的网站嵌入到另一个网站上。

我正在寻找一种将参数传递给 script 标记的方法:

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

有办法吗？

两个有趣的链接:

156878 次浏览
小开

将您需要的值放在其他脚本可以检索它们的地方，比如一个隐藏的输入，然后在初始化新脚本时从它们的容器中提取这些值。您甚至可以将所有参数作为 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 标记中的 params 作为类传递:

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

您还可以创建一个函数，让您直接获取 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');
小开

最好在 html55个数据属性中使用特性

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

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/

小开

这是一个非常古老的线索，我知道，但这也可能有所帮助，如果有人到这里一旦他们寻找解决方案。

基本上，我使用 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 的完美解决方案，因为存在一些限制; 如果脚本是异步加载的。新的浏览器应该包括”。属性。

希望能有所帮助。

小开

我很抱歉回答了一个超级老的问题，但在花了一个小时思考上述解决方案之后，我选择了更简单的方法。

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

剧本内容:

document.currentScript.getAttribute('one'); // 1
document.currentScript.getAttribute('two'); // 2

比 jQuery 或 URL 解析容易得多。

您可能需要从 @ Yared Rodriguez 的回答中为 document.currentScript填充 IE:

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>

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/

小开

另一种方法是使用 meta 标记。任何传递给 JavaScript 的数据都可以这样分配:

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

然后可以像下面这样从 meta 标记中提取数据(最好在 DOMContentLoade 事件处理程序中完成) :

var data1 = document.getElementsByName('yourdata')[0].content;
var data2 = document.getElementsByName('moredata')[0].content;

绝对没有与 jQuery 或类似的麻烦，没有必要的技巧和变通方法，并与任何支持元标记的 HTML 版本一起工作..。

小开

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

<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或 数据属性方法将是最时尚的。

这是这些方法中唯一还没有提到的。特别是，如果出于某种原因你有大量的数据，那么最好的选择可能是:

本地存储

/* On the original page, you add an inline JS Script.
* If you only have one datum you don't need JSON:
* localStorage.setItem('datum', 'Information here.');
* But for many parameters, JSON makes things easier: */
var data = {'data1': 'I got a lot of data.',
'data2': 'More of my data.',
'data3': 'Even more data.'};
localStorage.setItem('data', JSON.stringify(data));


/* External target JS Script, where your data is needed: */
var data = JSON.parse(localStorage.getItem('data'));
console.log(data['data1']);

LocalStorage 拥有完整的现代浏览器支持，并且对老式浏览器也有出人意料的良好支持，可以追溯到 IE 8、 Firefox 3、5和 Safari 4[11年前]等浏览器。

如果你没有大量的数据，但是仍然需要广泛的浏览器支持，也许最好的选择是:

元标签

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


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

这样做的缺陷在于，放置 meta 标记(直到 HTML 4)的正确位置是在 head 标记中，您可能不希望将这些数据放在那里。为了避免这种情况，或者将 meta 标记放在 body 中，您可以使用:

隐藏段落

/* 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>
小开

这是 JQuery3.4的解决方案

<script src="./js/util.js" data-m="myParam"></script>

$(document).ready(function () {
var m = $('script[data-m][data-m!=null]').attr('data-m');
})
小开

如果不使用名称传递参数，就像函数调用一样，那么会更简单。

HTML:

<script src="abc.js" data-args="a,b"></script>

然后，在 JavaScript 中:

const args=document.currentScript.dataset.args.split(',');

现在 args 包含数组[‘ a’，‘ b’]。


提交答案