我如何引用加载当前正在执行的脚本的脚本标记？ [英] How may I reference the script tag that loaded the currently-executing script?
问题描述
如何引用加载当前正在运行的javascript的脚本元素？
How can I reference the script element that loaded the javascript that is currently running?
以下是这种情况。我在页面中加载了一个主脚本，首先是在HEAD标记下面。
Here's the situation. I have a "master" script being loaded high in the page, first thing under the HEAD tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="scripts.js"></script>
scripts.js中有一个脚本需要能够按需加载其他脚本。普通方法对我来说不太有用，因为我需要添加新脚本而不引用HEAD标记，因为HEAD元素还没有完成渲染：
There is a script in "scripts.js" which needs to be able to do on-demand loading of other scripts. The normal method doesn't quite work for me because I need to add new scripts without referencing the HEAD tag, because the HEAD element hasn't finished rendering:
document.getElementsByTagName('head')[0].appendChild(v);
我想要做的是引用加载当前脚本的脚本元素，以便我可以追加我的新动态加载脚本标记到它之后。
What I want to do is reference the script element that loaded the current script so that I can then append my new dynamically loaded script tags into the DOM after it.
<script type="text/javascript" src="scripts.js"></script>
loaded by scripts.js--><script type="text/javascript" src="new_script1.js"></script>
loaded by scripts.js --><script type="text/javascript" src="new_script2.js"></script>
推荐答案
如何获取当前脚本元素：
1。使用 document.currentScript
document.currentScript 将返回< script> 当前正在处理其脚本的元素。
How to get the current script element:
1. Use document.currentScript
document.currentScript will return the <script> element whose script is currently being processed.
<script>
var me = document.currentScript;
</script>
福利
- 简单明了。可靠。
- 不需要修改脚本标记
- 使用异步脚本（
defer&async） - 使用动态插入的脚本
- Simple and explicit. Reliable.
- Don't need to modify the script tag
- Works with asynchronous scripts (
defer&async) - Works with scripts inserted dynamically
- 不适用于旧浏览器和IE浏览器。
Benefits
为脚本提供一个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>
福利
- 简单明了。可靠。
- 几乎普遍支持
- 使用异步脚本（
延迟&async） - 使用动态插入的脚本
- Simple and explicit. Reliable.
- Almost universally supported
- Works with asynchronous scripts (
defer&async) - Works with scripts inserted dynamically
- 需要向脚本标记添加自定义属性
-
- Requires adding a custom attribute to the script tag
idattribute may cause weird behaviour for scripts in some browsers for some edge cases
Benefits
为脚本提供 数据 - * 属性可让您轻松从内部选择它。
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.
- 简单明了。
- 使用异步脚本（
延迟&async） - 使用动态插入的脚本
- Simple and explicit.
- Works with asynchronous scripts (
defer&async) - Works with scripts inserted dynamically
- 需要向脚本标记添加自定义属性
- HTML5，
querySelector（）不符合所有浏览器 - 支持不如使用
id属性 - 将绕过
< script> ;，id边缘情况。 - 如果另一个元素在页面上具有相同的数据属性和值，可能会感到困惑。
- Requires adding a custom attribute to the script tag
- HTML5, and
querySelector()not compliant in all browsers - Less widely supported than using the
idattribute - Will get around
<script>withidedge 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"]');
福利
- 可靠
- 使用异步脚本（
延迟&async） - 使用动态插入的脚本
- 无需自定义属性或ID
- Reliable
- Works with asynchronous scripts (
defer&async) - Works with scripts inserted dynamically
- No custom attributes or id needed
- 不是否适用于本地脚本
- 会在不同的环境中造成问题，例如开发和制作
- 静态和脆弱。更改脚本文件的位置将需要修改脚本
- 支持不如使用
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
idattribute - Will cause problems if you load the same script twice
Benefits
我们也可以循环遍历每个脚本元素并单独检查每个脚本元素以选择我们想要的那个：
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
- Simple.
- Almost universally supported
- No custom attributes or id needed
- 不是否可以使用异步脚本（
推迟&async） - 不是否可以使用插入的脚本动态
- Does not work with asynchronous scripts (
defer&async) - Does not work with scripts inserted dynamically
Benefits
这篇关于我如何引用加载当前正在执行的脚本的脚本标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
