Mengapa Anda Tidak Boleh Melaksanakan Tulisan pada Dokumen dengan Skrip Asynchronously-Muat?

Laksanakan tulis pada dokumen: Apakah Isu dengan Skrip Asynchronously-Loaded?

Apabila bekerja dengan skrip yang dimuatkan secara tidak segerak, anda mungkin menghadapi ralat "Gagal melaksanakan 'tulis' pada dokumen. Tidak mungkin untuk menulis ke dalam dokumen daripada skrip luaran yang dimuatkan secara tak segerak melainkan ia dibuka secara eksplisit." Ini berlaku kerana skrip tak segerak dimuatkan selepas dokumen dihuraikan dan ditutup sepenuhnya, membuat perubahan terus kepada DOM menggunakan fungsi seperti document.write() tidak berkesan.

Memahami Penyelesaian

Untuk menyelesaikan isu ini, anda mesti menggantikan document.write() dengan manipulasi DOM yang jelas. Daripada bergantung pada sisipan kandungan automatik, anda perlu membuat elemen DOM secara manual dan memasukkannya dengan sewajarnya.

Contoh

Pertimbangkan skrip sebaris berikut yang menyisipkan merah Teks "Hello" ke dalam div "bekas":

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

Untuk melakukan tindakan yang sama dengan skrip yang dimuatkan secara tak segerak, anda akan menggantikan skrip sebaris dengan kod berikut:

<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, jika bekas itu tidak mempunyai kandungan lain, anda hanya boleh menulis ganti HTML dalamannya:

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

Dengan mengguna pakai manipulasi DOM eksplisit, anda boleh memastikan bahawa skrip anda yang dimuatkan secara tak segerak berinteraksi dengan dokumen dengan berkesan, mengelakkan had yang dikenakan oleh pelaksanaan skrip tertangguh.

Atas ialah kandungan terperinci Mengapa Anda Tidak Boleh Melaksanakan Tulisan pada Dokumen dengan Skrip Asynchronously-Muat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!