如何获取当前脚本元素：
1.使用 document.currentScript
document.currentScript将返回<script>当前正在处理其脚本的元素。
<script>
var me = document.currentScript;
</script>
好处
- 简单明了。可靠的。
- 不需要修改脚本标签
- 适用于异步脚本 (
defer& async)
- 适用于动态插入的脚本
问题
- 不适用于旧版浏览器和 IE。
- 不适用于module
<script type="module">
2.通过id选择脚本
为脚本提供一个 id 属性将使您可以轻松地通过 id 从 using 中选择它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属性得到广泛支持
- 会得到解决
<script>与id边缘情况。
- 如果页面上的另一个元素具有相同的数据属性和值，则可能会感到困惑。
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>
好处
问题
- 难道不是异步脚本工作（
defer＆async）
- 难道不是与动态插入脚本工作