gpt4 book ai didi

javascript - 如何引用加载当前执行脚本的脚本标签?

转载 作者:IT老高 更新时间:2023-10-28 13:12:05 25 4
gpt4 key购买 nike

如何引用加载当前正在运行的 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>

好处

  • 简单明了。可靠。
  • 无需修改脚本标签
  • 适用于异步脚本(deferasync)
  • 使用动态插入的脚本

问题

  • 不适用于旧版浏览器和 IE。
  • 不适用于模块 <script type="module">

2。按 id 选择脚本

给脚本一个 id 属性可以让您轻松地使用 document.getElementById() 从内部通过 id 选择它.

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

好处

  • 简单明了。可靠。
  • 几乎普遍支持
  • 适用于异步脚本(deferasync)
  • 使用动态插入的脚本

问题

  • 需要向脚本标签添加自定义属性
  • id在某些边缘情况下,属性可能会导致某些浏览器中的脚本出现奇怪的行为

3。使用 data-* 选择脚本属性

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

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

与上一个选项相比,这几乎没有什么好处。

好处

  • 简单明了。
  • 适用于异步脚本(deferasync)
  • 使用动态插入的脚本

问题

  • 需要向脚本标签添加自定义属性
  • 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"]');

好处

  • 可靠
  • 适用于异步脚本(deferasync)
  • 使用动态插入的脚本
  • 无需自定义属性或 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

问题

  • 是否适用于异步脚本(deferasync)
  • 是否适用于动态插入的脚本

关于javascript - 如何引用加载当前执行脚本的脚本标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/403967/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com