自定义属性

我可以使用自定义属性，在脚本标签，如：自定义属性

<script type="text/javascript" mycustomattribute="foo"> 
    //javascript 
</script>

然后使用包含JavaScript来访问“mycustomattribute”的价值？

来源

2013-07-21 tonejac

我已经回答了你的问题，但*为什么*你想这样做？如果我们知道为什么，我们可能会提出一个更好的选择。 –

备注：如果类型为“text/javascript”，没有理由拥有'type'属性，那只会浪费带宽。 [这是默认]（http://www.w3.org/TR/html5/scripting-1.html#attr-script-type），普遍。 –

谢谢@ T.J.Crowder。我正在撰写一个“嵌入此葡萄酒评论”小工具。目前我正在使用iframe，但我希望能够更好地与用户的网站布局一起流动。所以我使用JavaScript代码写入代码。但我需要一种可靠的方式来让用户的葡萄酒评论的唯一ID可用于JavaScript。（例如[链接] http://www.napawapa.com/reviews/view/Yp/2006-Opus-One [/ link] – tonejac

我可以使用自定义属性，在脚本标签，如：

是，使用data-* attributes：

<script data-info="the information"...

然后使用包含JavaScript来访问的价值'mycustomattribute'？

是的，可能。如果你给script标签的id，您可以可靠地做到这一点：

var info = document.getElementById("theId").getAttribute("data-info");

否则，您必须做出关于脚本标记假设。如果它总是在页面（后来使用代码不添加）的标记，你可以这样做：

var scripts = document.getElementsByTagName("script"); 
var info = scripts[scripts.length - 1].getAttribute("data-info");

这是因为，如果脚本标签的标记，它只要它遇到运行的（除非async or defer使用[并且由浏览器支持]），并且将始终是页面上的最后一个脚本标记（在该时间点）。但是，如果代码添加脚本标记后面，使用createElement和appendChild或类似，您不能依赖。

这里有一个完整的例子：Live Copy

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Data on Script Tags</title> 
</head> 
<body> 
    <script> 
    function display(msg) { 
     var p = document.createElement('p'); 
     p.innerHTML = String(msg); 
     document.body.appendChild(p); 
    } 
    </script> 
    <script data-info="first"> 
    (function() { 
     var scripts = document.getElementsByTagName("script"); 
     var info = scripts[scripts.length - 1].getAttribute("data-info"); 
     display("Got info '" + info + "'"); 
    })(); 
    </script> 
    <script data-info="second"> 
    (function() { 
     var scripts = document.getElementsByTagName("script"); 
     var info = scripts[scripts.length - 1].getAttribute("data-info"); 
     display("Got info '" + info + "'"); 
    })(); 
    </script> 
</body> 
</html>

来源

2013-07-21 06:30:22

在得到“最后一个”脚本时必须做出的假设之一是这种情况：http://stackoverflow.com/questions/14409982/is-it-the-last-script-element-the-currently-running-脚本＃14410368 – Alohci

@Alohci：良好的链接。为什么我不喜欢在各处放置脚本标签，并且肯定从不嵌套在内容中（除了在关闭''标签之前除外）之所以有很多原因之一。我知道这就是有些人喜欢做的事情，包括一些你几乎不得不尊重的人（例如Google Closure Library工程师），但它会导致这种事情... –

你应该得到它使用jQuery

$("script").attr("mycustomattribute");

或者尝试这种使用常规的JavaScript

document.getElementsByTagName("script")[0].getAttribute("mycustomattribute");

也许烘烤感给script标签的ID是能够做到这一点

能

document.getElementById("someId").getAttribute("mycustomattribute");

来源

2013-07-21 06:28:11 TGH

是的，这是真的，但这将是一个嵌入在外部网站的脚本块，不保证jquery存在:( – tonejac

好的，我做了一个更新 – TGH

这个答案有什么问题？ – TGH

是的，你可以这样做。浏览器必须忽略它们在任何标签中无法识别的属性（以便在文档对旧浏览器使用新功能时可以适度降级）。但是，使用数据集标记会更好，因为这些标记明确地保留给用户，所以它们不会与将来的HTML更改冲突。

<script id="myscript" type="text/javascript" data-mycustomattribute="foo">

然后，您可以访问此要么使用普通的属性访问器：

document.getElementById("myscript").getAttribute("mycustomattribute")

或与dataset API：

document.getElementById("myscript").dataset.mycustomattribute

（但看到文档中的浏览器兼容性表）。

来源

2013-07-21 06:29:10 Barmar

这并不回答这个问题（如何访问JS中的属性） –

@DannyBeckett他问“如果”，而不是“如何”，我假定他已经知道如何，只是想知道是否有任何限制这样做与脚本标签。 – Barmar

一个例子将很好代表你的答案。 –

我建了一个library这很实例，它很容易使用：

<script id="your-library" src="./your-library.js" data-car="pagani" data-star-repo="yes, please :)">

，然后你可以得到的数据：

/** 
* This returns the following: 
* 
* { 
* car: 'pagani', 
* starRepo: 'yes, please :)' 
* } 
*/ 

ScriptTagData.getData('your-library'); 


/** 
    * This returns the juust <script> tag 
    */ 

ScriptTagData.getData('your-library');

您可以通过Bower，CDN或只需要下载代码：https://github.com/FarhadG/script-tag-data

来源

2015-11-23 09:29:16 Vendetta

请做评论[如何提供个人开放在您的图书馆发布更多问题之前，请使用https://meta.stackexchange.com/q/229085）。 –

回答

相关问题