Pass a variable to Javascript directly from <script> HTML tag

Question

Is it possible to pass a variable directly from the HTML tag <script>:

<script async src="https://example.com/lib.js" site="test.com"></script>

such that lib.js can access site like a regular variable?

• user229044: This is not a commonly used pattern. You should probably just allow people to invoke some setup method and pass in actual JavaScript variables.
• Basj: @meagar Yes, I see it's not commonly used. If you want, could you elaborate on why it's not often used, and why invoking a setup is a superior solution, in an answer?
• Lain: Does this answer your question? How to pass parameters to a Script tag?

Answer 1

<script async src="https://example.com/lib.js" site="sitePath"></script>

and:

site = document.currentScript.getAttribute('site'); // sitePath

Answer 2

Yes this is possible. Instead of creating a site attribute we can use the dataset. This is made for custom (data-)attributes.

All you need to do now is give the script an ID and query your data.

HTML:

<script async src="script.js" data-site="test.com" id="myscript"></script>

JS:

const script = document.querySelector("#myscript");
console.log(script.dataset.site);

EDIT: without a querySelector

console.log(document.currentScript.dataset.site);

• Basj: Interesting solution! I'm being nitpicky: do you think there's a way without asking people using my lib to set an ID to the <script>?
• Ivar: @Basj document.currentScript

Answer 3

let me = document.querySelector('script[src$="lib.js"]');
me.getAttribute("site");

In addition to the answers above, this script will let you have more freedom to change the script's file name or path

• JavaScript: This is a very broad selector which could return multiple matches.