CODEWITHSUNDEEP
javascripthtml
tonejac
tonejac

Reputation: 1103

custom attributes in a script tag

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

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

And then use the contained JavaScript to access the value of mycustomattribute?

Upvotes: 8

Views: 18763

Answers (4)

Barmar
Barmar

Reputation: 782683

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).

Upvotes: 2

Vendetta
Vendetta

Reputation: 63

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

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075755

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>

Upvotes: 11

TGH
TGH

Reputation: 39278

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");

Upvotes: 1

Related Questions