如何找到載入目前正在執行的 JavaScript 的腳本元素？

如何引用載入目前正在執行的腳本的腳本元素

理解問題

在某些場景下，開發者可能需要動態載入額外的腳本腳本到文件中。然而，如果 HEAD 元素尚未完全渲染，傳統的使用 document.getElementsByTagName('head')[0].appendChild(v) 的方法可能不適合。

解決方案：引用目前腳本

要引用載入目前正在執行的腳本的腳本元素，可以採用多種技術：

1. document.currentScript

優點：

• 簡單、明確、可靠
• 不需要修改腳本標籤
• 使用非同步>
不需要修改腳本標籤
• 使用非同步腳本（defer &非同步）

適用於動態插入的腳本

限制：
• 舊版瀏覽器或IE 不支援

舊版瀏覽器或IE 不支援


舊版瀏覽器或IE 不支援

舊版瀏覽器或IE 不支援

舊版瀏覽器或IE 不支援

不適用於模組（)
<script><li>var me = document.currentScript;</script>
• < ;/pre>

2.腳本標籤ID

優點：

• 簡單、明確且可靠

廣泛支援

適用於非同步腳本（延遲與非同步）

使用插入的腳本動態

限制：

• 需要將id 屬性

var me = document。 >

簡單明確

使用非同步腳本（defer & async）

與插入的腳本一起使用動態

• 限制：

需要在腳本標籤上新增自訂data- *屬性

不如使用ID

可能會導致與共享相同資料的其他元素混淆屬性

4.來源選擇
• 優點：
• 可靠

使用非同步腳本（延遲和非同步）

使用腳本動態插入

沒有自訂屬性或ID必填限制：

• 不適用於本地腳本
• 在不同環境中導致問題（例如，開發與生產）
• 靜態且脆弱（更改腳本位置需要修改）
• 不如使用ID廣泛支援
• 如果使用相同的腳本，則會出現問題加載多次

<br><script src="//example.com/embed.%20js"></script><br>

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

5.腳本迭代

優點：

• 繼承了先前技術的優點
• 不依賴querySelector()，所以它可以在較舊的版本中工作。覽器

限制：

• 更複雜且計算成本更高

<br>更複雜且計算成本更高<br><br><br><pre class="brush:php;toolbar:false"><br> <pre class="brush:php;toolbar:false">me = scripts[i];

var me = null;

var script = document.getElementsByTagName("script")
for (var i = 0; i if (isMe( scripts[i])) {

}

}

6.最後執行的腳本

• 優點：
• 簡單

幾乎普遍支持沒有自如>定義屬性或ID必需

• 限制：

不適用於非同步腳本（延遲和異步）

不適用於插入的腳本動態

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

結論 引用目前腳本元素的方法的選擇取決於應用程式的特定要求和支援各種瀏覽器。對於現代瀏覽器，document.currentScript 是首選方法。

以上是如何找到載入目前正在執行的 JavaScript 的腳本元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！