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

假设我有以下脚本标记：

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

在该embed.js文件中，如何获取数据id属性的值

我试图使embed.js文件尽可能轻，因此理想情况下它不需要使用某种javascript库

在该embed.js文件中，如何获取数据id属性的值

您必须解析DOM并查找相应的标记，然后从中获取属性。看一看允许您检索当前页面上所有元素的。然后循环遍历此方法返回的结果数组，使用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');
    }
}

该embed.js正在DOM中呈现，因此您可以完全访问它。给它一个id，然后使用querySelectAll或getElementsByTagName的document.getElementById

在您的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;
    }
  }

---

对于支持html5的现代浏览器，您可以使用它来获取当前脚本元素

var scripts = document.getElementsByTagName('script'); // load into a variable all the scripts of the page
for (var i = 0; i < scripts.length; i++) { // parse all scripts
        var script = scripts[i];
        if (script.getAttribute('src') == '//example.com/embed.js') {
            alert(script.dataset.id); // Show only specified script
        }
    }

否则，使用按id或属性选择脚本元素

请注意，我们不使用src属性，因为如果通过CDN交付，或者开发环境和生产环境之间存在差异，那么src属性可能很脆弱

embed.js

在主机html中：

我可以使用以下内容：

var token = document
  .querySelector('script[data-id="MyUniqueName"][data-token]')
  .getAttribute('data-token');

---

在脚本标记所在的位置

通常最好用简短或更详细的解释来解释为什么您的代码回答了这个问题。

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

<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');

var attributeValue = Array.prototype.slice.apply(document.scripts).filter(
     function(script){
         return script.src.indexOf('script.source.com/big/') > -1;
     })[0].attributes["atrributeName"].value;