如何获取当前脚本元素:

1.使用 document.currentScript

document.currentScript 将返回当前正在处理其脚本的 元素.

<script>
var me = document.currentScript;
</script>

好处

• 简单明了.可靠.
• 不需要修改脚本标签
• 使用异步脚本 (defer & async)
• 使用动态插入的脚本
• 不适用于旧版浏览器和 IE.
• 不适用于模块

为脚本提供一个 id 属性，让您可以使用 document.getElementById().

Giving the script an id attribute will let you easily select it by id from within using document.getElementById().

<script id="myscript">
var me = document.getElementById('myscript');
</script>

好处

• 简单明了.可靠.
• 几乎得到普遍支持
• 使用异步脚本 (defer & async)
• 使用动态插入的脚本
• 需要向脚本标签添加自定义属性
• id 属性可能会导致某些浏览器中的脚本在某些边缘情况下出现奇怪的行为
• Requires adding a custom attribute to the script tag
• id attribute may cause weird behaviour for scripts in some browsers for some edge cases

给脚本一个 data-* 属性将让您轻松地从内部选择它.

Giving the script a data-* attribute will let you easily select it from within.

<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>

与前一个选项相比，这几乎没有什么好处.

This has few benefits over the previous option.

• 简单明了.
• 使用异步脚本 (defer & async)
• 使用动态插入的脚本

• 需要向脚本标签添加自定义属性
• HTML5 和 querySelector() 不适用于所有浏览器
• 不如使用 id 属性得到广泛支持
• 将绕过 和 id 边缘情况.
• 如果另一个元素在页面上具有相同的数据属性和值，则可能会感到困惑.

• Requires adding a custom attribute to the script tag
• HTML5, and querySelector() not compliant in all browsers
• Less widely supported than using the id attribute
• Will get around <script> with id edge cases.
• May get confused if another element has the same data attribute and value on the page.

您可以使用选择器按来源选择脚本，而不是使用数据属性:

Instead of using the data attributes, you can use the selector to choose the script by source:

<script src="//example.com/embed.js"></script>

在 embed.js 中:

In embed.js:

var me = document.querySelector('script[src="//example.com/embed.js"]');

好处

• 可靠
• 使用异步脚本 (defer & async)
• 使用动态插入的脚本
• 不需要自定义属性或 ID
• 是否不适用于本地脚本
• 会在不同的环境中导致问题，比如开发和生产
• 静态且易碎.更改脚本文件的位置需要修改脚本
• 不如使用 id 属性得到广泛支持
• 如果你两次加载同一个脚本会导致问题
• Does not work for local scripts
• Will cause problems in different environments, like Development and Production
• Static and fragile. Changing the location of the script file will require modifying the script
• Less widely supported than using the id attribute
• Will cause problems if you load the same script twice

我们还可以遍历每个脚本元素并单独检查每个元素以选择我们想要的:

We can also loop over every script element and check each individually to select the one we want:

<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() 属性的旧浏览器中使用之前的两种技术.例如:

This lets us use both previous techniques in older browsers that don't support querySelector() well with attributes. For example:

function isMe(scriptElem){
    return scriptElem.getAttribute('src') === "//example.com/embed.js";
}

这继承了任何方法的优点和问题，但不依赖于 querySelector()，因此可以在旧浏览器中工作.

This inherits the benefits and problems of whatever approach is taken, but does not rely on querySelector() so will work in older browsers.

由于脚本是按顺序执行的，最后一个脚本元素通常是当前正在运行的脚本:

Since the scripts are executed sequentially, the last script element will very often be the currently running script:

<script>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>

好处

• 简单.
• 几乎得到普遍支持
• 不需要自定义属性或 ID
• 是否不使用异步脚本(defer & async)
• 是否不使用动态插入的脚本
• Does not work with asynchronous scripts (defer & async)
• Does not work with scripts inserted dynamically