Bagaimana Mengendalikan Kegagalan Pelaksanaan Tulisan Dokumen Selepas Pemuatan Skrip Asynchronous?

Kegagalan Pelaksanaan Penulisan Dokumen Selepas Pemuatan Skrip Tak Segerak

Apabila memuatkan skrip secara tidak segerak, skrip yang dimuatkan berjalan selepas dokumen dihuraikan sepenuhnya dan tertutup. Had ini menghalang penggunaan document.write() daripada dalam skrip yang dimuatkan.

Sebab Ralat

Mesej ralat "Tidak boleh menulis ke dalam dokumen daripada skrip luaran yang dimuatkan secara tak segerak" menunjukkan bahawa percubaan untuk menulis pada dokumen menggunakan document.write() gagal kerana skrip telah dimuatkan selepas dokumen ditutup.

Manipulasi DOM Alternatif

Untuk menangani isu ini, anda perlu menggantikan mana-mana pernyataan document.write() dengan manipulasi DOM yang jelas. Ini melibatkan mencipta elemen DOM dan memasukkannya ke dalam elemen induk menggunakan kaedah seperti:

• .appendChild()
• .insertBefore()
• .innerHTML

Contoh

Sebagai contoh, bukannya menggunakan document.write() dalam skrip sebaris seperti berikut:

<code class="html"><div id="container">
<script>
document.write('<span style="color:red;">Hello');
</script>
</div></code>

Anda akan menggunakan kod berikut dalam skrip yang dimuatkan secara dinamik:

<code class="javascript">var container = document.getElementById("container");
var content = document.createElement("span");
content.style.color = "red";
content.innerHTML = "Hello";
container.appendChild(content);</code>

Sebagai alternatif, anda boleh menetapkan innerHTML bekas:

<code class="javascript">var container = document.getElementById("container");
container.innerHTML = '<span style="color:red;">Hello</span>';</code>

Dengan menggantikan penyataan document.write() dengan manipulasi DOM alternatif ini teknik, anda boleh memastikan kejayaan pelaksanaan skrip anda yang dimuatkan secara tak segerak sambil masih mencapai pengubahsuaian dokumen yang diingini.

Atas ialah kandungan terperinci Bagaimana Mengendalikan Kegagalan Pelaksanaan Tulisan Dokumen Selepas Pemuatan Skrip Asynchronous?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!