How to get the current script element:(如何获取当前脚本元素:)
1. Use document.currentScript
(1.使用document.currentScript
)
document.currentScript
will return the <script>
element whose script is currently being processed.
(document.currentScript
将返回当前正在处理其脚本的<script>
元素。)
<script>
var me = document.currentScript;
</script>
Benefits(好处)
Problems(问题)
2. Select script by id(2.按编号选择脚本)
Giving the script an id attribute will let you easily select it by id from within using document.getElementById()
.
(为脚本提供id属性将使您可以轻松地使用document.getElementById()
从id中选择它。)
<script id="myscript">
var me = document.getElementById('myscript');
</script>
Benefits(好处)
Problems(问题)
3. Select the script using a data-*
attribute(3.使用data-*
属性选择脚本)
Giving the script a data-*
attribute will let you easily select it from within.
(为脚本提供data-*
属性将使您轻松地从内部选择它。)
<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>
This has few benefits over the previous option.
(与以前的选择相比,这没有什么好处。)
Benefits(好处)
Problems(问题)
4. Select the script by src(4.通过src选择脚本)
Instead of using the data attributes, you can use the selector to choose the script by source:
(您可以使用选择器按源选择脚本,而不是使用数据属性:)
<script src="//example.com/embed.js"></script>
In embed.js:
(在embed.js中:)
var me = document.querySelector('script[src="//example.com/embed.js"]');
Benefits(好处)
Problems(问题)
- 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(支持范围不如使用id
属性)
- Will cause problems if you load the same script twice
(如果您两次加载相同的脚本,将导致问题)
5. Loop over all scripts to find the one you want(5.遍历所有脚本以查找所需的脚本)
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>
This lets us use both previous techniques in older browsers that don't support querySelector()
well with attributes.
(这使我们可以在不支持带有属性的querySelector()
较旧浏览器中使用这两种先前的技术。)
For example:(例如:)
function isMe(scriptElem){
return scriptElem.getAttribute('src') === "//example.com/embed.js";
}
This inherits the benefits and problems of whatever approach is taken, but does not rely on querySelector()
so will work in older browsers.
(这继承了采用任何方法的好处和问题,但不依赖querySelector()
因此可以在较旧的浏览器中使用。)
6. Get the last executed script(6.获取最后执行的脚本)
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>
Benefits(好处)
- Simple.
(简单。)
- Almost universally supported
(几乎得到普遍支持)
- No custom attributes or id needed
(无需自定义属性或ID)
Problems(问题)