Issue
When loading scripts without using modules, I could use the document.currentscript
to access custom attributes.
E.g.
<script src="js/myscript.js" data-custom-attribute="my-value"></script>
Within myscript.js I can then do the following
// will contain "my-value"
const myAttribute = document.currentScript.getAttribute('data-custom-attribute');
If I load the javascript using module syntax however, the currentScript
is set to null and this doesn't work.
<script src="js/myscript.js" data-custom-attribute="my-value" type="module"></script>
Is there a way to still access such attributes within the javascript file?
Solution
From 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
does not provide the data-attribute. Here are a few alternatives:
[edit may 2022] The import from the original snippet does not exist anymore. Though it's still loaded from cdn.jsdelivr.net
, this may in the future not be the case. So, added a new snippet using a 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";
const { log, debugLog, } = $;
debugLog.on()
debugLog.reversed(false);
$(`#logBox`).style({width: `auto`, maxWidth: `95vw`, height: `80vh`, maxHeight: `80vh`});
$.setStyle(`code`, {color: `green`, 'background-color': `#eee`});
// -------------------------------------------------------------------------------------
log(`--- retrieve script/script data attribute ---`);
log(`<code>document.currentScript</code> = ${document.currentScript}`);
log(`But
<code>document.querySelector("script[type=module]").dataset.customAttribute</code> = ${
document.querySelector("script[type=module]").dataset.customAttribute}`);
log(`Or targeted exactly
<code>document.querySelector("script[data-custom-attribute]").dataset</code> = ${
document.querySelector("script[data-custom-attribute]")
.dataset.customAttribute}`);
log(`Or retrieve from <code>document.scripts</code>:
<code>[...document.scripts].find(scrpt => scrpt.dataset.customAttribute).dataset.customAttribute</code> = ${
[...document.scripts].find(scrpt => scrpt.dataset.customAttribute).dataset.customAttribute}`);
</script>
Answered By - KooiInc
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.