Get URL of current module script

Question

I haven't found any mentions in the HTML spec nor anywhere on the web, that says this is possible, still I ask just in case.

Is it possible to get the URL of a module to for example fetch files relative to that URL?

Let's say my index.html has a:

<script type="module">import '/foo/foo.js'</script>

and foo.js wants to know what it's own url is to load dynamically some file e.g. ./file-inside-foo.

As of the time of this writing document.currentScript returns null inside modules and is probably like that by design?

ok, I found this github.com/whatwg/html/issues/1013 it seems it's still an open issue — olanod
– olanod, Commented Oct 11, 2017 at 15:13

Mike 'Pomax' Kamermans · Accepted Answer · 2023-12-21 18:26:28Z

11

You can use import.meta. On the web this exposes a property named url that, when accessed from within a module, gives access to the full URL of that module.

// in /path/to/your/module.js

const { pathname } = new URL(import.meta.url);
console.log(pathname); // '/path/to/your/module.js'

You can also use the second parameter of the URL constructor to skip a step here:

const url = new URL('relative/file.js', import.meta.url);

edited Dec 21, 2023 at 18:26

Mike 'Pomax' Kamermans

54.3k17 gold badges134 silver badges182 bronze badges

answered Aug 27, 2018 at 17:31

snek

2,1711 gold badge16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike 'Pomax' Kamermans · Accepted Answer · 2023-12-21 18:27:43Z

7

You can use import.meta which exposes a property named url providing the full path to the current module including the protocol and filename.

// import.meta.url == 'http://your.domain.name/path/to/your/module.js'

To get the path of the current module without the protocol + domain you can construct a URL object from this value and access its .pathname property:

const modulePath = new URL(import.meta.url).pathname;
// modulePath = '/path/to/your/module.js'

To determine the directory where the current module is located you would construct a URL object for the relative path ./ using import.meta.url as the base parameter:

const moduleDir = new URL('./', import.meta.url).pathname;
// moduleDir == '/path/to/your/'

You can also get the path of any file relative to the current module in the same manner. For example:

let img = new Image();
image.src = new URL('../icons/glyph.png', import.meta.url).pathname;
// image.src == '/path/to/icons/glyph.png'

edited Dec 21, 2023 at 18:27

Mike 'Pomax' Kamermans

54.3k17 gold badges134 silver badges182 bronze badges

answered Aug 27, 2018 at 17:12

Besworks

4,5931 gold badge24 silver badges41 bronze badges

4 Comments

snek Over a year ago

please use new URL(import.meta.url) to parse a URL, not manually splitting.

snek Over a year ago

const { modulePath } = new URL('./', import.meta.url).pathname; should be const modulePath = new URL('./', import.meta.url).pathname; or const { pathname: modulePath } = new URL('./', import.meta.url);

Besworks Over a year ago

I feel I should point out that @snek is a contributor to these proposed standards and part of the reason these great new features exist. His contributions to both the web and this answer should be noted.

snek Over a year ago

thanks :) But I haven't put any work into the import.meta proposal or URL standard. There are other people who should get credit long before I do.

Collectives™ on Stack Overflow

Get URL of current module script

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related