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的缺点是你无法成功嵌入两个相同的脚本。这是一种非常罕见的情况，但可能会发生。

请注意，我个人{@ 1}}选择脚本而不是传递数据，并将唯一数据放在更具描述性的标记中：

data-id

这将让我使用以下内容：

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

Answer 2

在DOM中呈现embed.js，因此您可以完全访问它。请使用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 3

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

Answer 4

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>

Answer 5

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

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

5 个答案: