名字太短容易被记住

V1

2022/12/17阅读:64主题:默认主题

如何获取 <script> 标签上自定义参数的值?

前段时间开发了一个小插件,功能很简单,引入之后脚本会自动执行一些逻辑,所以在发布时将它打包成了 IIFE[1] 模式的 js 包。

在项目中接入时,直接通过 script 标签引入即可,就像这样:

<script src="https://xxxcdn.com/fehub-plugin.js"></script>

但是在插件的后续使用中,发现有几个参数,如果能够支持自定义的话,使用起来会更加方便。

那么咱们就升级一下,让他支持自定义~

为了避免改动过大,所以第一时间想到的就是通过 script 标签的属性来传递参数,就像这样:

<script src="xxx" param1="fehub" param2="18"></script>

如何获取到参数的值?

好了,参数是设置好了,但是怎样才能取到这个参数呢?

一般情况下,如果我们想要获取某个元素上的属性,可以先通过 querySelector[2] 选择器找到对应的元素,然后再通过 getAttribute[3] 方法获取,就像这样:

<!-- HTML -->
<div id="demo" name="fehub">Hello 👋🏻 ~</div>

<!-- JavaScript -->
const demoEle = document.querySelector("#demo");
console.log(demoEle.getAttribute("name"));
// fehub

所以,可以让用户在接入此脚本的时候,设置一个约定好的固定 id,然后在脚本内通过 querySelector 获取到此 script 标签,就像这样:

<!-- HTML -->
<script src="https://xxxcdn.com/fehub-plugin.js" id="fehub-plugin" param1="fehub" param2="18"></script>

<!-- JavaScript -->
const script = document.querySelector("#fehub-plugin");
console.log(script);
// <script src="https://xxxcdn.com/fehub-plugin.js" param1="fehub" param2="18"></script>

console.log(script.getAttribute("param1"));
// fehub

console.log(script.getAttribute("param2"));
// 18

但是,这种方法不太可控,如果插件的 id 没有设置,那么就无法达到想要的效果。

原生 API

不过好消息是document 上有一个 currentScript[4] 对象,表示的就是当前正在运行的脚本所属的 script 元素,用起来非常简单,就像这样:

<!-- HTML -->
<script src="https://xxxcdn.com/fehub-plugin.js" param1="fehub" param2="18"></script>

<!-- JavaScript -->
const script = document.currentScript;
console.log(script);
// <script src="https://xxxcdn.com/fehub-plugin.js" param1="fehub" param2="18"></script>

console.log(script.getAttribute("param1"));
// fehub

console.log(script.getAttribute("param2"));
// 18

现在就好多了,直接通过原生 API 即可,而且兼容性也很好:

但是需要注意的是:如果你是以 module[5] 的形式加载的 JavaScript(也就是设置了 type="module" 这个属性),那么 currentScript 这个属性是无效的[6]

这种情况可以通过 import.meta[7]url 属性配合 querySelector 来获取当前 script 标签元素,就像这样:

<!-- HTML -->
<script type="module" src="https://xxxcdn.com/fehub-plugin.js" param1="fehub" param2="18"></script>

<!-- JavaScript -->
const script = document.querySelector(`script[src="${import.meta.url}"]`);

console.log(script);
// <script src="https://xxxcdn.com/fehub-plugin.js" param1="fehub" param2="18"></script>

console.log(script.getAttribute("param1"));
// fehub

console.log(script.getAttribute("param2"));
// 18

另外,如果想要通过添加自定义属性来传递参数,那么建议使用 data-*[8] 语法设置参数,然后通过 dataset 取值。

可以避免和已有属性出现冲突,也更符合官方标准,就像这样:

<!-- HTML -->
<script src="https://xxxcdn.com/fehub-plugin.js" data-param1="fehub" data-param2="18"></script>

<!-- JavaScript -->
const script = document.currentScript;
console.log(script);
// <script src="https://xxxcdn.com/fehub-plugin.js" data-param1="fehub" data-param2="18"></script>

console.log(script.dataset.param1);
// fehub

console.log(script.dataset.param2);
// 18

关注我

好了,这就是今天分享的全部内容啦 ~

关注我,每天学一个有趣的小知识 😉

参考资料

[1]

IIFE: https://developer.mozilla.org/en-US/docs/Glossary/IIFE

[2]

querySelector: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

[3]

getAttribute: https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

[4]

currentScript: https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript

[5]

module: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

[6]

无效的: https://github.com/whatwg/html/issues/997

[7]

import.meta: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta

[8]

data-*: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*

分类:

前端

标签:

JavaScript

作者介绍

名字太短容易被记住
V1

liming.xin