成为VIP
前段时间开发了一个小插件，功能很简单，引入之后脚本会自动执行一些逻辑，所以在发布时将它打包成了 IIFE 模式的 js 包。
在项目中接入时，直接通过 script 标签引入即可，就像这样：
但是在插件的后续使用中，发现有几个参数，如果能够支持自定义的话，使用起来会更加方便。
那么咱们就升级一下，让他支持自定义~
为了避免改动过大，所以第一时间想到的就是通过 script 标签的属性来传递参数，就像这样：
如何获取到参数的值？
好了，参数是设置好了，但是怎样才能取到这个参数呢？
一般情况下，如果我们想要获取某个元素上的属性，可以先通过 querySelector 选择器找到对应的元素，然后再通过 getAttribute 方法获取，就像这样：
Hello ~
const demoEle = document.querySelector("#demo");
console.log(demoEle.getAttribute("name"));
// fehub所以，可以让用户在接入此脚本的时候，设置一个约定好的固定 id，然后在脚本内通过 querySelector 获取到此 script 标签，就像这样：
const script = document.querySelector("#fehub-plugin");
console.log(script);
//
console.log(script.getAttribute("param1"));
// fehub
console.log(script.getAttribute("param2"));
// 18但是，这种方法不太可控，如果插件的 id 没有设置，那么就无法达到想要的效果。
原生 API
不过好消息是document 上有一个 currentScript 对象，表示的就是当前正在运行的脚本所属的 script 元素，用起来非常简单，就像这样：
const script = document.currentScript;
console.log(script);
//
console.log(script.getAttribute("param1"));
// fehub
console.log(script.getAttribute("param2"));
// 18现在就好多了，直接通过原生 API 即可，而且兼容性也很好：
但是需要注意的是：如果你是以 module 的形式加载的 JavaScript（也就是设置了 type=”module” 这个属性），那么 currentScript 这个属性是无效的。
这种情况可以通过 import.meta 的 url 属性配合 querySelector 来获取当前 script 标签元素，就像这样：
const script = document.querySelector(`script[src="${import.meta.url}"]`);
console.log(script);
//
console.log(script.getAttribute("param1"));
// fehub
console.log(script.getAttribute("param2"));
// 18另外，如果想要通过添加自定义属性来传递参数js获取url参数，那么建议使用 data-* 语法设置参数，然后通过 dataset 取值。
可以避免和已有属性出现冲突，也更符合官方标准，就像这样：
const script = document.currentScript;
console.log(script);
//
console.log(script.dataset.param1);
// fehub
console.log(script.dataset.param2);
// 18关注我
好了js获取url参数，这就是今天分享的全部内容啦 ~
关注我，每天学一个有趣的小知识
限时特惠：本站每日持续更新海量展厅资源，一年会员只需29.9元，全站资源免费下载
站长微信：zhanting688
