Rumah > Artikel > hujung hadapan web > Perkara tentang document.write dalam pengetahuan js_Basic

Perkara tentang document.write dalam pengetahuan js_Basic

WBOYasal: 2016-05-16 16:27:281586semak imbas

Ingat, strim output penyemak imbas ditutup secara automatik selepas halaman dimuatkan. Selepas ini, sebarang kaedah document.write() yang beroperasi pada halaman semasa akan membuka aliran keluaran baharu, yang akan mengosongkan kandungan halaman semasa (termasuk sebarang pembolehubah atau nilai daripada dokumen sumber). Oleh itu, jika anda ingin menggantikan halaman semasa dengan HTML yang dijana oleh skrip, anda mesti menggabungkan kandungan HTML dan menetapkannya kepada pembolehubah, dan menggunakan kaedah document.write() untuk menyelesaikan operasi penulisan. Daripada mengosongkan dokumen dan membuka aliran data baharu, satu panggilan document.write() boleh melakukan semuanya.

Satu lagi perkara yang perlu diberi perhatian tentang kaedah document.write() ialah kaedah berkaitan document.close(). Selepas skrip selesai menulis kandungan ke tetingkap (sama ada tetingkap ini atau tetingkap lain), aliran keluaran mesti ditutup. Selepas kaedah document.write() terakhir bagi skrip kelewatan, anda mesti memastikan kaedah document.close() disertakan. Jika tidak, imej dan borang tidak boleh dipaparkan. Selain itu, sebarang panggilan seterusnya ke kaedah document.write() hanya akan menambahkan kandungan pada halaman, tetapi tidak akan mengosongkan kandungan sedia ada untuk menulis nilai baharu. Untuk menunjukkan kaedah document.write(), kami menyediakan dua versi aplikasi yang sama. Satu menulis ke dokumen yang mengandungi skrip, dan yang lain menulis ke tetingkap berasingan. Sila taip setiap dokumen dalam editor teks, simpan dengan sambungan fail .html dan buka dokumen dalam penyemak imbas anda.

Contoh 1 mencipta butang yang memasang kandungan HTML baharu untuk dokumen, termasuk teg HTML untuk tajuk dokumen baharu dan atribut warna untuk teg. Dalam contoh, terdapat operator = yang tidak biasa kepada pembaca Ia menambah rentetan di sebelah kanan ke pembolehubah di sebelah kiri Pembolehubah ini digunakan untuk menyimpan rentetan ini dengan mudah digabungkan tali panjang. Menggunakan kandungan yang digabungkan dalam pembolehubah newContent, pernyataan document.write() boleh menulis semua kandungan baharu pada dokumen, mengosongkan kandungan sepenuhnya dalam Contoh 1. Kemudian anda perlu memanggil pernyataan document.close() untuk menutup aliran output. Apabila dokumen dimuatkan dan butang diklik, perhatikan bahawa tajuk dokumen dalam bar tajuk penyemak imbas berubah akibatnya. Apabila anda kembali ke dokumen asal dan klik butang sekali lagi, anda dapat melihat bahawa halaman kedua yang ditulis secara dinamik dimuatkan lebih cepat daripada memuatkan semula dokumen asal.

Contoh 1 menggunakan document.write() dalam tetingkap semasa.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>
<script language="JavaScript">
 function reWrite(){
  // assemble content for new window
  var newContent = "<html><head><title>A New Doc</title></head>"
  newContent += "<body bgcolor='aqua'><h1>This document is brand new.</h1>"
  newContent += "Click the Back button to see original document."
  newContent += "</body></html>"
  // write HTML to new window document
  document.write(newContent)
  document.close() // close layout stream
 }
</script>
</head>
<body>
 <form>
  <input type="button" value="Replace Content" onClick="reWrite()">
 </form>
</body>
</html>

Dalam Contoh 2, situasinya agak rumit kerana skrip mencipta sub-tetingkap di mana keseluruhan dokumen yang dihasilkan oleh skrip akan ditulis. Untuk memastikan rujukan kepada tetingkap baharu aktif dalam kedua-dua fungsi, kami mengisytiharkan pembolehubah newWindow sebagai pembolehubah global. Apabila halaman dimuatkan, pengendali acara onLoad memanggil fungsi makeNewWindow(), yang menjana tetingkap anak kosong. Selain itu, kami menambah atribut pada parameter ketiga kaedah window.open() untuk menjadikan bar status tetingkap kanak-kanak kelihatan.

Butang pada halaman memanggil kaedah subWrite() Tugas pertama yang dilakukannya ialah menyemak atribut tertutup subtingkap. Sifat ini (hanya terdapat dalam versi penyemak imbas yang lebih baharu) mengembalikan benar jika tetingkap rujukan ditutup. Jika ini berlaku (jika pengguna menutup tetingkap secara manual), fungsi memanggil makeNewWindow() sekali lagi untuk membuka semula tetingkap itu.

Selepas tetingkap dibuka, kandungan baharu digabungkan sebagai pembolehubah rentetan. Seperti dalam Contoh 1, kandungan ditulis sekali (walaupun ini tidak diperlukan untuk tetingkap berasingan), dan kemudian kaedah close() dipanggil. Tetapi perhatikan perbezaan penting: kedua-dua kaedah write() dan close() secara eksplisit menentukan tetingkap kanak-kanak.

Contoh 2 Menggunakan document.write() dalam tetingkap lain

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Subwindow</title>
<script language="JavaScript">
 var newWindow
 function makeNewWindow(){
  newWindow = window.open("","","status,height=200,width=300")
 }

 function subWrite(){
  // make new window if someone has closed it
  if(newWindow.closed){
   makeNewWindow()
  }
  // bring subwindow to front
  newWindow.focus()
  // assemble content for new window
  var newContent = "<html><head><title>A New Doc</title></head>"
  newContent += "<body bgcolor='coral'><h1>This document is brand new.</h1>"
  newContent += "</body></html>"
  // write HTML to new window document
  newWindow.document.write(newContent)
  newWindow.document.close()  // close layout stream
 }
</script>
</head>

<body onLoad="makeNewWindow()">
 <form>
  <input type="button" value="Write to Subwindow" onClick="subWrite()">
 </form>
</body>
</html>

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Tulis semula document.write untuk mencapai pemuatan tidak menyekat iklan js (tambahan)_kemahiran javascriptArtikel seterusnya：Tulis semula document.write untuk mencapai pemuatan tidak menyekat iklan js (tambahan)_kemahiran javascript

Artikel berkaitan

Lihat lagi