Bagaimana untuk Mengatasi Pengehadan document.write() dalam Pemuatan Skrip Asynchronous?

Pemuatan Skrip Asynchronous: Memahami Pengehadan document.write()

Apabila melaksanakan skrip secara tidak segerak, selepas pemuatan halaman awal, adalah penting untuk menjadi menyedari batasan yang ditimbulkannya pada manipulasi dokumen. Seperti yang dinyatakan dalam mesej konsol, "Tidak mungkin untuk menulis ke dalam dokumen daripada skrip luaran yang dimuatkan secara tak segerak melainkan ia dibuka secara eksplisit."

Ini bermakna menggunakan document.write() dalam secara luaran sedemikian. skrip yang dimuatkan tidak akan menulis pada dokumen dengan berkesan, walaupun skrip itu sendiri berjaya dimuatkan. Sebabnya terletak pada fakta bahawa skrip tak segerak dijalankan selepas dokumen dihuraikan dan ditutup.

Untuk menangani isu ini, adalah perlu untuk menggantikan document.write() dengan manipulasi DOM yang jelas. Daripada menulis terus pada dokumen, buat elemen DOM yang dikehendaki dan tambahkannya pada dokumen menggunakan kaedah seperti appendChild(), insertBefore(), atau dengan menetapkan sifat innerHTML.

Sebagai contoh, bukannya menggunakan dokumen .write() dalam skrip sebaris:

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

Dalam skrip yang dimuatkan secara dinamik, gantikannya dengan yang berikut:

var container = document.getElementById("container");
var content = document.createElement("span");
content.style.color = "red";
content.innerHTML = "Hello";
container.appendChild(content);

Sebagai alternatif, jika tiada kandungan lain dalam bekas , anda boleh terus menetapkan sifat innerHTML:

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

Dengan mengikut garis panduan ini, anda boleh memanipulasi DOM dengan berkesan daripada skrip yang dimuatkan secara tak segerak tanpa menghadapi ralat "Gagal melaksanakan 'tulis' pada 'Dokumen'".

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi Pengehadan document.write() dalam Pemuatan Skrip Asynchronous?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!