脚本标记中的自定义属性

时间:2013-07-21 06:26:20

标签: javascript html

我可以在脚本标记中使用自定义属性,例如:

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

然后使用包含的javascript访问'mycustomattribute'的值?

4 个答案:

答案 0 :(得分:8)

  

我可以在脚本标记中使用自定义属性,例如:

是的,使用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 [并且浏览器支持]),并且始终是页面上的最后一个脚本标记(在那个时间点)。但同样,如果代码使用createElementappendChild或类似代码添加脚本标记,则不能依赖它。

以下是一个完整的示例: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>

答案 1 :(得分:1)

你应该可以使用jquery

来获取它
$("script").attr("mycustomattribute");

或者使用常规JavaScript

尝试此操作
document.getElementsByTagName("script")[0].getAttribute("mycustomattribute");

为了能够做到这一点,可以给脚本标签提供一个id

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

答案 2 :(得分:0)

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

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

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

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

或使用dataset API

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

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

答案 3 :(得分:0)

我为这个实例构建了一个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