[英]Access html5 data-* attributes defined in a module script
在不使用模块的情况下加载脚本时,我可以使用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 文件中访问这些属性?
来自MDN
Document.currentScript 属性返回当前正在处理其脚本且不是 JavaScript 模块的元素。 (对于模块,请改用 import.meta。)
import.meta
不提供数据属性。 以下是一些替代方案:
[ 2022 年 5 月编辑] 从原始代码段导入的内容不再存在。 虽然它仍然是从cdn.jsdelivr.net
加载的,但将来可能不是这样。 因此,使用更持久的库添加了一个新片段。
<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> `; // -------------------------------------------------------------------------- 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>
我没有解决这个问题的方法,但我想指出,非模块脚本也可能存在问题,不显示document.currentScript.getAttribute(...)
。 该问题可能特定于 Firefox。 参考。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.