访问模块脚本中定义的 html5 data-* 属性

Question

在不使用模块的情况下加载脚本时，我可以使用 document.currentscript 访问自定义属性。

例如

<script src="js/myscript.js" data-custom-attribute="my-value"></script>

在 myscript.js 内，我可以执行以下操作

// will contain "my-value"
const myAttribute = document.currentScript.getAttribute('data-custom-attribute');

但是，如果我使用模块语法加载 javascript，currentScript 将设置为 null，这不起作用。

<script src="js/myscript.js" data-custom-attribute="my-value" type="module"></script>

是否仍然可以在 javascript 文件中访问此类属性？

Answer 1

来自MDN

The Document.currentScript property returns the element whose script is currently being processed and isn't a JavaScript module. (For modules use import.meta instead.)

import.meta 不提供数据属性。这里有一些备选方案：

[2022 年 5 月编辑] 从原始片段导入的内容不再存在。虽然它仍然是从 cdn.jsdelivr.net 加载的，但将来可能不是这样。因此，使用 more persistent library.

添加了一个新片段

<script data-custom-attribute="my-value" type="module">
  import {Logger} from 
    "https://cdn.jsdelivr.net/gh/KooiInc/DOM-Utilities@v1.1.2/SmallHelpers.js";
  const log = Logger();
  log(`document.currentScript is ${document.currentScript}`);
  log(`But with querySelector ... data-custom-attribute from module script: ${
    document.querySelector("script[type=module]").dataset.customAttribute}`);
  log(`Or more precize: document.querySelector("script[data-custom-attribute]"): ${
    document.querySelector("script[data-custom-attribute]")
      .dataset.customAttribute}`);
  log(`Or retrieve and filter document.scripts: ${[...document.scripts]
      .find(scrpt => scrpt.dataset.customAttribute).dataset.customAttribute}`);
</script>

<script type="module" data-custom-attribute="my-value">
  import $ from "https://kooiinc.github.io/JQL/lib/JQLBundle.js";
  $.setStyle(`#result`, {whiteSpace: `nowrap`});
  $.setStyle(`#result div`, {marginTop: `0.3rem`});
  $.setStyle(`code`, {color: `green`});
  const log = (...lines) => 
    lines.forEach( line => $(`#result`).html(`<div>${line}</div>`, true));
  const indent = `<br>&nbsp;&nbsp;`;
  
  // --------------------------------------------------------------------------
  log(`<code>document.currentScript</code> = ${document.currentScript}`); 
  log(`But<br>
    <code>document.querySelector("script[type=module]")
    .dataset.customAttribute</code> = "${ 
     document.querySelector("script[type=module]").dataset.customAttribute}"`);
  log(`Or targeted exactly<br> 
    <code>document.querySelector("script[data-custom-attribute]")
    ${indent}.dataset.customAttribute</code> = "${ 
    document.querySelector("script[data-custom-attribute]")
      .dataset.customAttribute}"`); 
  log(`Or retrieve from <code>document.scripts</code><br>
    <code>[...document.scripts].find(scrpt =>
       ${indent}scrpt.dataset.customAttribute).dataset.customAttribute</code> = "${
        [...document.scripts].find(scrpt => scrpt.dataset.customAttribute)
          .dataset.customAttribute}"`);
</script>

<div id="result"></result>

Answer 2

我没有解决这个问题的方法，但我想指出 non 模块脚本不显示 document.currentScript.getAttribute(...) 也可能存在问题.该问题可能特定于 Firefox。 Reference.

访问模块脚本中定义的 html5 data-* 属性

Access html5 data-* attributes defined in a module script

html

javascript

es6-modules