假设我有以下脚本标签:
<script async data-id="p3PkBtuA" src="//example.com/embed.js"></script>
在该embed.js
文件中,如何获取data-id
属性值?
我试图使embed.js
文件尽可能轻巧,因此理想情况下它不需要使用某种 javascript 库。
假设我有以下脚本标签:
<script async data-id="p3PkBtuA" src="//example.com/embed.js"></script>
在该embed.js
文件中,如何获取data-id
属性值?
我试图使embed.js
文件尽可能轻巧,因此理想情况下它不需要使用某种 javascript 库。
对于支持 html5 的现代浏览器,您可以使用它document.currentScript
来获取当前脚本元素。
否则,使用id或attributequerySelector()
来选择您的脚本元素。
请注意,我们不使用该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.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;
}
}
你明白了
在该 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
}
}