发表新帖
发表新帖

custom attributes in a script tag

前端 未结
关注
4 634
说谎
说谎 2021-01-18 08:43

Can I use a custom attribute in a script tag such as:
相关标签:
4条回答
  • 暖寄归人
    2021-01-18 09:21

    Yes, you can do this. Browsers are required to ignore attributes they don't recognize in any tag (to allow for graceful degradation when a document uses new features with an old browser). However, it would be better to use a dataset tag, since these are explicitly reserved for users, so they don't conflict with future HTML changes.

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

    You can then access this either using an ordinary attribute accessor:

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

    or with the dataset API:

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

    (but see the browser compatibility table in the documentation).

    0 讨论(0)
  • 被撕碎了的回忆
    2021-01-18 09:33

    I built a library for this very instance and it's quite easy to use:

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

    and then you can get that data:

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

 ScriptTagData.getData('your-library');


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

 ScriptTagData.getData('your-library');

    You can download it via Bower, CDN or just take the code: https://github.com/FarhadG/script-tag-data

    0 讨论(0)
  • 死守一世寂寞
    2021-01-18 09:43

    You should be able to get it using jquery

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

    Or try this using regular JavaScript

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

    Might bake sense to give a script tag an id to be able to do this

    document.getElementById("someId").getAttribute("mycustomattribute");
    0 讨论(0)
  • 有刺的猬
    2021-01-18 09:47

    Can I use a custom attribute in a script tag such as:

    Yes, using data-* attributes:

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

    And then use the contained javascript to access the value of 'mycustomattribute'?

    Yes, probably. If you give the script tag an id, you can do it reliably:

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

    Otherwise, you have to make assumptions about the script tag. If it's always in the markup of the page (not added later using code), you can do this:

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

    That's because if the script tag is in the markup, it's run as soon as it's encountered (unless async or defer is used [and supported by the browser]), and will always be the last script tag on the page (at that point in time). But again, if code adds the script tag later, using createElement and appendChild or similar, you can't rely on that.

    Here's a complete example: 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>
    0 讨论(0)
 看不清?
提交回复
热议问题