如何获取当前的脚本元素：
1. 使用 document.currentScript
document.currentScript 会返回当前正在处理的脚本所在的 <script> 元素。
<script>
var me = document.currentScript;
</script>
好处
- 简单明了，可靠。
- 无需修改脚本标签。
- 适用于异步脚本 (
defer & async)。
- 适用于动态插入的脚本。
问题
- 不支持旧版浏览器和IE。
- 不适用于模块
<script type="module">。
2. 通过id选择脚本
给脚本加上id属性可以让您方便地通过document.getElementById()选择它。
<script id="myscript">
var me = document.getElementById('myscript');
</script>
好处
- 简单明了，可靠。
- 几乎具备普遍支持
- 适用于异步脚本（
defer & async）
- 适用于动态插入的脚本
问题
- 需要向脚本标签添加自定义属性
id 属性可能会在某些浏览器和某些极端情况下导致脚本出现异常行为
3. 使用 data-* 属性选择脚本
给脚本添加data-* 属性，将使您可以轻松地从中进行选择。
<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>
相比之前的选项，这种方法有一些好处。
优点
- 简单明了。
- 适用于异步脚本(
defer & async)
- 适用于动态插入的脚本
问题
- 需要向脚本标签添加自定义属性
- HTML5和
querySelector()不兼容所有浏览器
- 不如使用
id属性被广泛支持
- 可以处理带有
id边缘情况的<script>
- 如果页面上另一个元素具有相同的数据属性和值，则可能会混淆。
4.通过src选择脚本
而不是使用数据属性，可以通过选择器按源代码选择脚本：
<script src="//example.com/embed.js"></script>
在embed.js中：
var me = document.querySelector('script[src="//example.com/embed.js"]')
好处
- 可靠
- 适用于异步脚本 (
defer & async)
- 适用于动态插入的脚本
- 不需要自定义属性或ID
问题
- 无法用于本地脚本
- 会在不同环境（如开发和生产）中出现问题
- 静态且脆弱。更改脚本文件的位置需要修改脚本
- 与使用
id属性相比，支持范围较窄
- 如果多次加载相同的脚本，会导致问题
5. 循环遍历所有脚本以查找所需脚本
我们也可以循环遍历每个脚本元素，并逐个检查以选择我们想要的那个：
<script>
var me = null;
var scripts = document.getElementsByTagName("script")
for (var i = 0; i < scripts.length; ++i) {
if( isMe(scripts[i])){
me = scripts[i];
}
}
</script>
这让我们能够在不支持querySelector() 属性的旧浏览器中同时使用前面提到的两种技术。例如：
function isMe(scriptElem){
return scriptElem.getAttribute('src') === "//example.com/embed.js";
}
这种方法继承了采取任何方法的好处和问题，但不依赖于querySelector()，因此可以在旧版本的浏览器中使用。
6. 获取最后执行的脚本
由于脚本是按顺序执行的，最后一个脚本元素很常会是当前正在运行的脚本：
<script>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>
好处
- 简单易用。
- 几乎被所有浏览器支持。
- 不需要自定义属性或 ID。
问题
- 不支持异步脚本 (
defer & async)。
- 不能与动态插入的脚本一起使用。
