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

IT技术 javascript
2021-03-18 01:49:57

假设我有以下脚本标签:

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

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

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

5个回答

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

否则,使用idattributequerySelector()来选择您的脚本元素

请注意,我们不使用该src属性,因为如果您通过 CDN 或开发环境和生产环境之间存在差异,则属性可能很脆弱。

嵌入.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');

embed.js在 DOM 中呈现,因此您可以完全访问它。Eithergive它的id和使用document.getElementByIdquerySelctorAllgetElementsByTagName

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

你明白了

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

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
        }
    }
用一个简短的(甚至更好的、详细的)解释来解释为什么你的代码回答这个问题通常是一个好主意
2021-05-03 01:49:57