獲取當前模塊腳本的URL

Question

我沒有在HTML規范中找到任何提及，也沒有在網絡上找到任何提及，這說明這是可能的，我仍然要求以防萬一。

是否可以獲取模塊的URL以獲取相對於該URL的文件？

假設我的index.html有一個：

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

和foo.js想知道它自己的url是動態加載一些文件，例如./file-inside-foo 。

截至撰寫document.currentScript時， document.currentScript在模塊內部返回null ，可能就像設計一樣？

Answer 1

HTML Living Standard目前包含一個ECMA-262標准的第3階段提案 ，該標准實現了import.meta ，它公開了一個名為url的屬性，提供了當前模塊的完整路徑，包括協議和文件名。

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

要獲取沒有協議+域的當前模塊的路徑，您可以從此值構造URL對象並訪問其.pathname屬性：

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

要確定當前模塊所在的目錄，您將使用import.meta.url作為base參數構造相對路徑./的URL對象：

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

您還可以以相同的方式獲取相對於當前模塊的任何文件的路徑。 例如：

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

不幸的是，import.meta可能並非在所有瀏覽器中都可用，但它是在Google Chrome的v64中實現的 。

Answer 2

ECMA-262有一個實施import.meta的第3階段提案 。 在Web上，這會公開名為url的屬性，當從模塊中訪問該屬性時，可以訪問該模塊的完整URL。

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

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

您還可以使用URL構造函數的第二個參數跳過此處的步驟：

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

不幸的是， import.meta可能尚未在所有瀏覽器中提供，但是在谷歌瀏覽器的v64中實現 。