获取脚本标签的数据属性？答案

【问题标题】：Get data attribute of script tag?获取脚本标签的数据属性？
【发布时间】：2013-02-15 22:23:58
【问题描述】：

假设我有以下脚本标签：

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

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

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

【问题讨论】：

标签： javascript script-tag

【解决方案1】：

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

否则，请使用 querySelector() 通过 id 或 attribute 选择您的脚本元素。

请注意，我们不使用 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');

【讨论】：

【解决方案2】：

使用currentScript

脚本标签：

<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

【讨论】：

【解决方案3】：

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

其中脚本标签为<sript src="www.script.source.com/big/dud/baa.js" atrributeName="some value"><script>

【讨论】：

【解决方案4】：

embed.js 正在 DOM 中呈现，因此您可以完全访问它。给它一个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;
    }
  }

你懂的

【讨论】：

【解决方案5】：

在那个 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');
    }
}

【讨论】：

【解决方案6】：

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

【讨论】：

最好解释一下为什么您的代码用简短（甚至更好、更详细）的解释来回答问题。