JavaScript Document currentScript Property

What You’ll Learn

Document.currentScript is a read-only instance property that returns the <script> element whose classic script is currently being processed—or null. Learn when it is set, why callbacks clear it, how modules use import.meta instead, and five examples with try-it labs.

Introduction

When a classic (non-module) <script> runs, the browser knows which element is executing. document.currentScript exposes that element so your code can inspect its src, async flag, id, or data-* attributes.

MDN stresses two limits: it does not apply to JavaScript modules (use import.meta), and it does not stay set inside callbacks or event handlers—only while the script is initially being processed.

Related Document tutorials: cookie, contentType, Document constructor.

Understanding Document.currentScript

A read-only instance property on Document. Its value is an HTMLScriptElement or null.

• During classic script run — points at that <script> element.
• Modules — not for type="module"; use import.meta (MDN).
• Callbacks / handlers — usually null (MDN).
• Useful reads — .src, .async, .defer, .dataset.
• Not assignable — you cannot set document.currentScript.

📝 Syntax

document.currentScript

Value

An HTMLScriptElement for the classic script currently being processed, or null.

Typical first lines

const scriptEl = document.currentScript;
console.log(scriptEl);           // <script>...</script> or null
console.log(scriptEl?.src);      // URL if external
console.log(scriptEl?.async);    // true / false

⚖️ Classic scripts vs modules

Examples Gallery

Examples follow MDN Document: currentScript. Use classic (non-module) scripts. Use View Output or Try It Yourself for each case.

const el = document.currentScript;
console.log("Tag:", el && el.tagName); // "SCRIPT"
console.log("Id:", el && el.id);
console.log("Inline?:", el && !el.src);

Tag: SCRIPT
Id: demo
Inline?: true

if (document.currentScript.async) {
  console.log("Executing asynchronously");
} else {
  console.log("Executing synchronously");
}

Executing synchronously

// <script data-theme="dark" data-api="/v1"> ...
const cfg = document.currentScript.dataset;
console.log("theme:", cfg.theme);
console.log("api:", cfg.api);

theme: dark
api: /v1

console.log("During load:", document.currentScript !== null);

setTimeout(() => {
  console.log("Inside timer:", document.currentScript); // null
}, 0);

During load: true
Inside timer: null

const me = document.currentScript;

document.getElementById("btn").addEventListener("click", () => {
  console.log("Saved id:", me.id);
  console.log("currentScript now:", document.currentScript); // null
});

Saved id: widget
currentScript now: null

🚀 Common Use Cases

• Embeddable widgets — read data-* options from the include script.
• CDN snippets — detect whether the snippet loaded with async.
• Base URL helpers — derive paths from currentScript.src for classic bundles.
• Self-removal — some loaders remove their own script element after boot.
• Not for modules — use import.meta.url in ESM (MDN).
• Not for “who called me?” in handlers — save a reference early instead.

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Returns HTMLScriptElement or null.
• Not for JavaScript modules — use import.meta (MDN).
• Null in callbacks / event handlers unless you saved a reference earlier.
• Related events on Document (advanced): beforescriptexecute, afterscriptexecute (see MDN).
• Related: cookie, contentType, Document constructor.

💡 Best Practices