Get data attribute of script tag?

by

For modern browsers that support html5 you can use document.currentScript to get the current script element.

Otherwise, use querySelector() to select your script element by id or attribute.

Note that we don’t use the src attribute because that can be fragile if you’re delivering over a CDN or with differences between development and production environments.

embed.js

(function(){
    // We look for:
    //  A `script` element
    //  With a `data-id` attribute
    //  And a `data-name` attribute equal to "MyUniqueName"
    var me = document.querySelector('script[data-id][data-name="MyUniqueName"]');
    var id = me.getAttribute('data-id');
})();

In the host html: 

<script async 
  data-id="p3PkBtuA" 
  data-name="MyUniqueName" 
  src="https://example.com/embed.js">
</script>

This approcah has the downside that you couldn’t successfully embed two identical scripts. This is a pretty rare case, but could happen.

Note that I would personally us data-id to select the script instead of passing data, and would place the unique data in a more descriptive tag:

<script async 
  data-id="MyUniqueName" 
  data-token="p3PkBtuA" 
  src="https://example.com/embed.js">
</script>

which would let me use this following: 

var token = document
  .querySelector('script[data-id="MyUniqueName"][data-token]')
  .getAttribute('data-token');

More Related Contents:

  1. How to dynamically insert a tag via jQuery after page load?
  2. How to force a script reload and re-execute?
  3. HTML/Javascript: how to access JSON data loaded in a script tag with src set
  4. How to tell if a tag failed to load
  5. How to pass parameters to a Script tag?
  6. React: Script tag not working when inserted using dangerouslySetInnerHTML
  7. Does an external .js file require tags?
  8. How does HTML tags work inside script tag?
  9. What’s the difference between ‘$(this)’ and ‘this’?
  10. Detect element content changes with jQuery
  11. Create object from class name in JavasScript ECMAScript 6
  12. What’s the best way to loop through a set of elements in JavaScript?
  13. jquery, find div class name at a certain position while scrolling
  14. How to set a Header field on POST a form?
  15. Javascript: Call a function after specific time period
  16. What’s the difference between `useRef` and `createRef`?
  17. Reordering arrays
  18. Can I disable ECMAscript strict mode for specific functions?
  19. Adding an img element to a div with javascript
  20. Is it OK to put JavaScript in Partial Views
  21. How to inject CSS using content script file in Chrome extension?
  22. How to test if an object is a Proxy?
  23. How to load javascript from external source and execute it in Google Apps Script
  24. Best way to parse HTML in Javascript
  25. Detect browser wrapped lines via javascript
  26. HTML5 Dynamically create Canvas
  27. Binding context when calling ES6 method. How to access object from within method called as callback?
  28. How to interpret documentation for optional JavaScript parameters [duplicate]
  29. window.open() simply adds the url to my current url
  30. Browser: Uncaught ReferenceError: require is not defined

Leave a Comment