38

假设我有以下脚本标签：

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

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

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

4

6 回答 6

52

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

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

请注意，我们不使用该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');
于 2014-03-30T13:38:45.217 回答
8

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

你明白了

于 2013-02-15T22:26:30.927 回答
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>

于 2014-10-19T16:23:04.180 回答
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');
    }
}
于 2013-02-15T22:25:10.333 回答
1 
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
        }
    }
于 2014-01-14T20:20:32.577 回答
0

使用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
于 2022-02-11T05:25:05.100 回答