获取脚本标记的数据属性？

Question

说我有以下脚本标记:

<script async data-id="p3PkBtuA" src="//example.com/embed.js"></script>

在该embed.js文件中,如何获取data-id属性的值？

我试图保持embed.js文件尽可能轻,所以理想情况下它不需要使用某种类型的JavaScript库.

Answer 1

对于支持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>

这个approcah的缺点是你无法成功嵌入两个相同的脚本.这是一个非常罕见的情况,但可能会发生.

请注意,我个人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');

Answer 2

使用当前脚本

脚本标签：

<script async data-id="p3PkBtuA" data-foo ="bar" src="//example.com/example.js"></script>

在 example.js 文件中：

let id = document.currentScript.getAttribute('data-id');
let foo = document.currentScript.getAttribute('data-foo');  

console.log(id) // p3PkBtuA
console.log(foo) // bar

Answer 3

这embed.js是在DOM中呈现的,因此您可以完全访问它.Eithergive它的id和使用document.getElementById的querySelctorAll或getElementsByTagName

embed.js你可以在你的内容中得到:

  var scripts = document.getElementsByTagName('script');
  for(var i = 0, l = scripts.length; i < l; i++){
    if(scripts[i].src === '//example.com/embed.js'){
      alert(scripts[i].getAttribute('data-id'));
      break;
    }
  }

你明白了

Answer 4

在该 embed.js 文件中，如何获取 data-id 属性的值？

您必须解析 DOM 并查找相应的<script>标签，然后从中获取属性。看一下它document.getElementsByTagName可以让您检索<script>当前页面上的所有元素。然后循环遍历此方法返回的结果数组，使用该src属性匹配正确的脚本元素，然后读取您感兴趣的其他属性。

var scripts = document.getElementsByTagName('script');
for (var i = 0; i < scripts.length; i++) {
    var script = scripts[i];
    // you might consider using a regex here
    if (script.getAttribute('src') == '//example.com/embed.js') {
        // we've got a match
        var dataId = script.getAttribute('data-id');
    }
}