javascript - 获取脚本标签的数据属性?

标签 javascript script-tag

假设我有以下脚本标记:

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

相关文章:

javascript - 如何将参数传递给脚本标签?

javascript - 'Jeditable' 请求后重新加载页面

javascript - IE 8,功能无法链接到输入按钮

javascript - HTML5 Canvas : Drawing shapes around edges of the canvas

javascript - 多个与单个脚本标签

javascript - 从 React 组件中的脚本访问变量

javascript - 如何使用 Prototype 插入 &lt;script&gt;?

javascript - <TABLE> 中可以有 <SCRIPT> 标签吗?

javascript - 如何使用 AngularJS 将选定的第一个值设置为 SELECT(multiple)

javascript - 使用 Google Earth API 查找地形信息