将参数传递给脚本标签

在Web开发中，我们经常需要通过脚本标签来引入JS代码。但有时候需要给JS代码传递参数，这个时候就需要学会将参数传递给脚本标签。

传递参数的基本方法

我们可以通过给脚本标签添加属性来传递参数。常见的属性有data-*和id。

以data-*属性为例，我们可以这样定义脚本标签：

<script src="yourScript.js" data-param1="value1" data-param2="value2"></script>

在JS代码中，可以通过dataset属性获取到这些参数：

var param1 = document.currentScript.dataset.param1;
var param2 = document.currentScript.dataset.param2;

如果我们通过id属性定义脚本标签，可以这样获取参数：

<script src="yourScript.js" id="yourScript" param1="value1" param2="value2"></script>

var scriptTag = document.getElementById('yourScript');
var param1 = scriptTag.getAttribute('param1');
var param2 = scriptTag.getAttribute('param2');

传递JSON格式的参数

如果需要传递一个JSON格式的参数，我们可以将参数序列化成字符串后通过data-*或id属性传递。

var params = {foo: 'bar', age: 18};
var paramsStr = JSON.stringify(params);

通过data-*属性传递：

<script src="yourScript.js" data-params='{"foo":"bar", "age": 18}'></script>

var params = JSON.parse(document.currentScript.dataset.params);

通过id属性传递：

<script src="yourScript.js" id="yourScript" params='{"foo":"bar", "age": 18}'></script>

var scriptTag = document.getElementById('yourScript');
var params = JSON.parse(scriptTag.getAttribute('params'));

注意事项

• 如果需要在HTML中嵌入JSON格式的数据，请务必将其序列化后再传递。
• 在IE浏览器中，可能会出现dataset属性获取不到data-*属性值的情况，此时可以通过getAttribute来获取。
• 如果需要在JS代码中获取参数，建议将脚本标签放在JS文件中，否则需要等待页面加载完成才能正确获取参数。