8

我可以在script标签中使用自定义属性，例如：

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

然后使用包含的 JavaScript 访问mycustomattribute?

4

4 回答 4

11

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

是的，使用data-*属性：

<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或被defer使用[并且被浏览器支持]），并且永远是页面上的最后一个脚本标签（在那个时间点） . 但同样，如果代码稍后添加 script 标签，使用createElementandappendChild或类似的，你不能依赖它。

这是一个完整的示例：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-21T06:30:22.563 回答
2

是的，你可以这样做。浏览器需要忽略它们在任何标签中无法识别的属性（以允许在文档使用旧浏览器的新功能时优雅降级）。但是，最好使用数据集标记，因为这些标记是为用户明确保留的，因此它们不会与未来的 HTML 更改发生冲突。

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

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

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

或使用datasetAPI：

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

（但请参阅文档中的浏览器兼容性表）。

于 2013-07-21T06:29:10.543 回答
1

您应该能够使用 jquery 获得它

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

或者使用常规 JavaScript 试试这个

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

可能会给脚本标签一个 id 以便能够做到这一点

document.getElementById("someId").getAttribute("mycustomattribute");
于 2013-07-21T06:28:11.047 回答
0

我为这个实例构建了一个库，它非常易于使用：

<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-23T09:29:16.130 回答