Mengapa document.write() Terhad dalam Skrip Asynchronously Loaded?

Sekatan Pelaksanaan dalam Skrip Asynchronously Loaded: Memahami Pengehadan document.write()

Percubaan untuk menulis pada dokumen daripada skrip yang dimuatkan secara tidak segerak menimbulkan mesej konsol, "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." Mesej ini mungkin muncul walaupun tingkah laku skrip yang dijangkakan, menyebabkan pembangun bingung.

Mengapa Sekatan Wujud

Skrip yang dimuatkan secara tak segerak selalunya dilaksanakan selepas dokumen dihuraikan dan tertutup. Akibatnya, menggunakan document.write() daripada skrip sedemikian menjadi bermasalah kerana dokumen tidak lagi dibuka untuk ditulis.

Penyelesaian: Manipulasi DOM Eksplisit

Daripada menggunakan dokumen .write(), pembangun mesti memanipulasi DOM secara eksplisit dalam skrip yang dimuatkan secara tak segerak. Ini melibatkan mencipta elemen DOM dan memasukkannya ke dalam elemen induk yang dikehendaki menggunakan kaedah seperti .appendChild(), .insertBefore(), atau tetapan .innerHTML.

Contoh: Manipulasi DOM

Untuk menggambarkan, pertimbangkan skrip sebaris berikut:

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

Dalam skrip yang dimuatkan secara tak segerak, kod ini boleh digantikan dengan:

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

Sebagai alternatif, memandangkan bekas itu adalah kosong, kod ringkas berikut boleh digunakan:

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

Dengan menggunakan teknik manipulasi DOM ini, pembangun boleh menulis dengan berkesan kepada dokumen daripada skrip yang dimuatkan secara tidak segerak, mengelakkan pengehadan yang dikenakan oleh document.write().

Atas ialah kandungan terperinci Mengapa document.write() Terhad dalam Skrip Asynchronously Loaded?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!