如何查找加载当前正在执行的 JavaScript 的脚本元素？

如何引用加载当前正在执行的脚本的脚本元素

理解问题

在某些场景下，开发者可能需要动态加载额外的脚本脚本到文档中。然而，如果 HEAD 元素尚未完全渲染，传统的使用 document.getElementsByTagName('head')[0].appendChild(v) 的方法可能不适合。

解决方案：引用当前脚本

要引用加载当前正在执行的脚本的脚本元素，可以采用多种技术：

1. document.currentScript

优点：

• 简单、明确、可靠
• 不需要修改脚本标签
• 使用异步脚本（defer &异步）
• 适用于动态插入的脚本

限制：

• 旧版浏览器或 IE 不支持
• 不适用于模块（)

<br><script><br>var me = document.currentScript;<br></script><br>&lt ;/pre><h4>2.脚本标签 ID</h4><p><strong>优点：</strong></p>

• 简单、明确且可靠
• 广泛支持
• 适用于异步脚本（延迟和异步）
• 使用插入的脚本动态

限制：

• 需要向脚本标签添加 id 属性

<br>var me = document.getElementById('myscript');<br><br>

3.数据属性选择

优点：

• 简单明确
• 使用异步脚本（defer & async）
• 与插入的脚本一起使用动态

限制：

• 需要向脚本标签添加自定义 data-* 属性
• 不如使用ID
• 可能会导致与共享相同数据的其他元素混淆属性

<br><script data-name="myscript"><br>var me = document.querySelector('script[data-name="myscript"] ');<br><br></p>
<h4>4.源选择</h4>
<p><strong>优点：</strong></p>
<ul>
<li>可靠</li>
<li>使用异步脚本（延迟和异步）</li>
<li>使用脚本动态插入</li>
<li>没有自定义属性或ID必填</li>
</ul>
<p><strong>限制：</strong></p>
<ul>
<li>不适用于本地脚本</li>
<li>在不同环境中导致问题（例如，开发与生产）</li>
<li>静态且脆弱（更改脚本位置需要修改）</li>
<li>不如使用 ID 得到广泛支持</li>
<li>如果使用相同的脚本，则会出现问题加载多次</li>
</ul>
<p><pre class="brush:php;toolbar:false"><br><script src="//example.com/embed.js"></script><br>

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

5.脚本迭代

优点：

• 继承了之前技术的优点
• 不依赖于querySelector()，所以它可以在较旧的版本中工作浏览器

限制：

• 更复杂且计算成本更高

<br><br>var me = null;<br>var script = document.getElementsByTagName("script")<br>for (var i = 0; i <scripts.length i> if (isMe(scripts[i])) {<pre class="brush:php;toolbar:false">me = scripts[i];

}
}

6.最后执行的脚本

优点：

• 简单
• 几乎普遍支持
• 没有自定义属性或ID必需

限制：

• 不适用于异步脚本（延迟和异步）
• 不适用于插入的脚本动态

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

结论

引用当前脚本元素的方法的选择取决于应用程序的具体要求和支持各种浏览器。对于现代浏览器，document.currentScript 是首选方法。

以上是如何查找加载当前正在执行的 JavaScript 的脚本元素？的详细内容。更多信息请关注PHP中文网其他相关文章！