Bagaimana untuk Mencari Elemen Skrip yang Memuatkan JavaScript yang sedang Dilaksanakan?

Cara Merujuk Elemen Skrip Yang Memuatkan Skrip Yang Sedang Dilaksanakan

Memahami Isu

Dalam senario tertentu, pembangun mungkin perlu memuatkan tambahan secara dinamik skrip ke dalam dokumen. Walau bagaimanapun, kaedah konvensional menggunakan document.getElementsByTagName('head')[0].appendChild(v) mungkin tidak sesuai jika elemen HEAD masih belum dipaparkan sepenuhnya.

Penyelesaian: Merujuk Skrip Semasa

Untuk merujuk elemen skrip yang memuatkan skrip yang sedang dilaksanakan, beberapa teknik boleh bekerja:

1. document.currentScript

Kelebihan:

• Mudah, jelas dan boleh dipercayai
• Tidak memerlukan pengubahsuaian teg skrip
• Berfungsi dengan skrip tak segerak (tunda & async)
• Berfungsi dengan skrip yang dimasukkan secara dinamik

Penghadan:

• Tidak disokong dalam penyemak imbas lama atau IE
• Tidak berfungsi dengan modul ()

<br><script><br>var me = document.currentScript;<br></script><br>&lt ;/pra></p>
<h4>2. ID Tag Skrip</h4>
<p><strong>Kelebihan:</strong></p>
<ul>
<li>Mudah, jelas dan boleh dipercayai</li>
<li>Disokong secara meluas</li>
<li>Berfungsi dengan skrip tak segerak (tunda & async)</li>
<li>Berfungsi dengan skrip disisipkan secara dinamik</li>
</ul>
<p><strong>Keterbatasan:</strong></p>
<ul><li>Memerlukan penambahan atribut id pada teg skrip</li></ul>
<p><pra> <br><skrip>var saya = document.getElementById('myscript');<br></script><br>

3. Pemilihan Atribut Data

Kelebihan:

• Mudah dan eksplisit
• Berfungsi dengan skrip tak segerak (tunda & tak segerak)
• Berfungsi dengan skrip yang dimasukkan secara dinamik

Batasan:

• Memerlukan penambahan data tersuai-* atribut pada teg skrip
• Kurang disokong secara meluas daripada menggunakan ID
• Boleh menyebabkan kekeliruan dengan elemen lain yang berkongsi data yang sama atribut

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

4. Pemilihan Sumber

Kelebihan:

• Dipercayai
• Berfungsi dengan skrip tak segerak (tunda & tak segerak)
• Berfungsi dengan skrip disisipkan secara dinamik
• Tiada atribut atau ID tersuai diperlukan

Had:

• Tidak berfungsi untuk skrip tempatan
• Menyebabkan masalah dalam persekitaran yang berbeza (cth., dev vs. prod)
• Statik dan rapuh (perubahan kepada lokasi skrip memerlukan pengubahsuaian)
• Kurang disokong secara meluas daripada menggunakan ID
• Masalah timbul jika skrip yang sama dimuatkan beberapa kali

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

5. Lelaran Skrip

Kelebihan:

• Mewarisi manfaat teknik sebelumnya
• Tidak bergantung pada querySelector(), jadi ia berfungsi pada yang lebih lama penyemak imbas

Batasan:

• Lebih kompleks dan mahal dari segi pengiraan

< skrip>
var me = null;
skrip var = document.getElementsByTagName("script")
for (var i = 0; i < scripts.length; i) {
if (isMe(scripts[i])) {

me = scripts[i];

}
}

6. Skrip Terakhir Dilaksanakan

Kelebihan:

• Mudah
• Hampir disokong secara universal
• Tiada atribut atau ID tersuai diperlukan

Penghadan:

• Tidak berfungsi dengan skrip tak segerak (tunda & tak segerak)
• Tidak berfungsi dengan skrip yang dimasukkan secara dinamik

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

Kesimpulan

Pilihan kaedah untuk merujuk elemen skrip semasa bergantung pada keperluan khusus aplikasi dan sokongan untuk pelbagai pelayar. Untuk penyemak imbas moden, document.currentScript ialah pendekatan pilihan.

Atas ialah kandungan terperinci Bagaimana untuk Mencari Elemen Skrip yang Memuatkan JavaScript yang sedang Dilaksanakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!