如何引用加载当前正在运行的 javascript 的脚本元素？
情况是这样的。我有一个“主”脚本加载在页面的较高位置，首先是在 HEAD 标签下。
<!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 元素尚未完成渲染:
document.getElementsByTagName('head')[0].appendChild(v);
我想要做的是引用加载当前脚本的脚本元素，以便我可以将新的动态加载脚本标记附加到其后的 DOM 中。
<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>当前正在处理其脚本的元素。
<script>
var me = document.currentScript;
</script>
好处
- 简单、明确。可靠。
- 不需要修改脚本标签
- 使用异步脚本(
defer和async) - 适用于动态插入的脚本
问题
- 不适用于旧版浏览器和 IE。
- 不适用于模块
<script type="module">
2。按 id 选择脚本
为脚本提供 id 属性，您可以使用 document.getElementById() 轻松地通过 id 从内部选择它。 。
<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>
好处
- 简单。
- 几乎得到普遍支持
- 无需自定义属性或 ID
问题
- 不适用于异步脚本(
defer和async) - 不适用于动态插入的脚本
关于javascript - 如何引用加载当前正在执行的脚本的脚本标记？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58493906/