假设我有以下脚本标记:
<script async data-id="p3PkBtuA" src="//example.com/embed.js"></script>
在 embed.js
文件中,如何获取 data-id
属性的值?
我试图让 embed.js
文件尽可能精简,因此理想情况下它不需要使用某种 JavaScript 库。
最佳答案
对于支持 html5 的现代浏览器,您可以使用 document.currentScript
获取当前脚本元素。
否则,请使用 querySelector()
通过id或属性选择脚本元素。
请注意,我们不使用 src
属性,因为如果您通过 CDN 进行交付或者开发环境与生产环境之间存在差异,该属性可能会很脆弱。
embed.js
(function(){
// We look for:
// A `script` element
// With a `data-id` attribute
// And a `data-name` attribute equal to "MyUniqueName"
var me = document.querySelector('script[data-id][data-name="MyUniqueName"]');
var id = me.getAttribute('data-id');
})();
在主机 html 中:
<script async
data-id="p3PkBtuA"
data-name="MyUniqueName"
src="//example.com/embed.js">
</script>
此方法的缺点是您无法成功嵌入两个相同的脚本。这是一种非常罕见的情况,但也有可能发生。
请注意,我个人会使用data-id
来选择脚本而不是传递数据,并将唯一数据放置在更具描述性的标签中:
<script async
data-id="MyUniqueName"
data-token="p3PkBtuA"
src="//example.com/embed.js">
</script>
这会让我使用以下内容:
var token = document
.querySelector('script[data-id="MyUniqueName"][data-token]')
.getAttribute('data-token');
关于javascript - 获取脚本标签的数据属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14904378/