All geek questions in one place

Custom attributes in script tag

Is it possible to use a custom attribute in a script tag, for example:

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

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

+4
source share
4 answers

Is it possible to use a custom attribute in a script tag, for example:

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 tag a script a id , you can do it reliably:

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

Otherwise, you should make assumptions about the script tag. If it is always in the page layout (not added later using code), you can do this:

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

This is because if the script tag is in the markup, it starts as soon as it occurs (if async or defer used [and supported by the browser]) and will always be the last script tag on the page (at that point in time). But then again, if the code adds the script tag later, using createElement and appendChild or similar, you cannot rely on this.

Here is 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>
+7
source

You can get it using jquery

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

Or try this using regular JavaScript

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

You can correct the meaning to give the script tag an identifier to be able to do this

 document.getElementById("someId").getAttribute("mycustomattribute");
+1
source

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

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

You can then access this either using a regular attribute accessory:

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

or with dataset API :

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

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

+1
source

I built a library for this very example and is pretty easy to use:

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

and then you can get this 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
source

Source: https://habr.com/ru/post/1492545/

More articles:


All Articles