JavaScript menyediakan satu set objek dengan jendela sebagai inti, menyadari kontrol akses jendela browser. 6 Objek penting didefinisikan dalam JavaScript:
Objek jendela mewakili jendela yang terbuka di browser;
Objek dokumen mewakili objek dokumen yang memuat halaman di browser;
Objek lokasi berisi informasi URL saat ini dari browser;
Objek navigasi berisi informasi tentang browser itu sendiri;
Objek layar berisi informasi tentang layar klien dan kemampuan rendering;
Objek sejarah berisi informasi historis browser yang mengakses halaman web.
Selain objek jendela, lima objek lainnya adalah properti objek jendela. Hubungan mereka adalah sebagai berikut:
1. Objek Windows
Objek jendela adalah objek global JavaScript, sehingga properti dan metode menggunakan objek jendela tidak perlu ditentukan. Misalnya: Peringatan, panggilan lengkap sebenarnya window.alert, yang biasanya menghilangkan referensi ke objek jendela.
1. Properti, metode, dan peristiwa objek Windows
| Nama atribut | memengaruhi | demo |
|---|---|---|
| nama | Tentukan nama jendela | |
| induk | Jendela induk dari jendela saat ini (bingkai), menggunakannya untuk mengembalikan metode dan sifat objek | |
| pembuka | Mengembalikan objek jendela yang menghasilkan jendela saat ini, dan menggunakannya untuk mengembalikan metode dan properti objek | |
| atas | Ini mewakili jendela utama, adalah jendela tingkat atas, dan juga jendela induk dari semua jendela lainnya. Metode dan sifat dari jendela saat ini dapat diakses melalui objek ini | |
| Diri sendiri | Mengembalikan objek di jendela saat ini melalui metode dan sifat mana dari jendela saat ini dapat diakses. | |
| DefaultStatus | Mengembalikan atau mengatur konten default yang akan ditampilkan di bilah status browser | |
| status | Mengembalikan atau mengatur konten yang ditentukan yang akan ditampilkan di bilah status browser |
| Nama metode | memengaruhi | demo |
|---|---|---|
| peringatan() | Menampilkan kotak dialog peringatan yang berisi pesan dan tombol OK | |
| mengonfirmasi() | Tampilkan kotak dialog konfirmasi | |
| mengingatkan() | Tampilkan kotak dialog prompt yang meminta pengguna untuk memasukkan data | |
| membuka() | Buka jendela yang ada, atau buat jendela baru dan muat dokumen di jendela itu | |
| menutup() | Tutup jendela yang terbuka | |
| navigasi () | Tampilkan halaman web yang ditentukan di jendela saat ini | |
| setTimeout () | Atur timer dan panggil fungsi setelah interval waktu yang ditentukan dilewati. | |
| ClearTimeout () | Setel ulang timer yang ditentukan | |
| fokus() | Membuat objek jendela dapatkan fokus saat ini | |
| mengaburkan() | Buat objek jendela kehilangan fokus saat ini |
| peristiwa | menjelaskan | demo |
|---|---|---|
| onload | Terjadi saat file HTML dimuat ke dalam browser | |
| Onunload | Terjadi saat file HTML dihapus dari browser | |
| Onfocus | Terjadi saat jendela mendapat fokus | |
| Onblur | Terjadi saat jendela kehilangan fokus | |
| onhelp | Terjadi saat pengguna menekan tombol F1 | |
| Onressize | Terjadi saat pengguna mengubah ukuran jendela | |
| Onscroll | Terjadi saat pengguna menggulir jendela | |
| Onerror | Terjadi ketika kesalahan terjadi saat memuat file HTML |
2. Fungsi utama yang disediakan oleh objek jendela:
Sesuaikan ukuran dan posisi jendela, buka jendela baru, kotak prompt sistem, kontrol status batang, dan operasi waktu. Berikut ini adalah deskripsi berikut dari 5 fungsi ini.
(1) Sesuaikan ukuran dan posisi jendela
metode | penggunaan | menjelaskan |
window.moveby Pindahkan jendela browser ke lokasi yang ditentukan (posisi relatif) | window.moveby (dx, dy) | Untuk pertimbangan keamanan dan pengguna yang baik, skrip JavaScript tidak diizinkan untuk digunakan untuk memindahkan Windows di luar area visual. Jendela browser harus selalu dijamin berada di area visual layar. |
window.moveto Pindahkan jendela browser ke lokasi yang ditentukan (Penentuan posisi absolut) | window.moveby (x, y) | Jika koordinat yang ditentukan (x, y) menempatkan sebagian atau semua jendela di luar area yang terlihat, jendela akan tetap paling dekat dengan tepi layar. |
Window.Resizeby Ubah ukuran jendela browser ke lebar dan tinggi yang ditentukan (relatif mengubah ukuran jendela) | window.ressizeby (DW, DH) | |
Window.Resizeto Ubah ukuran jendela browser ke lebar dan tinggi yang ditentukan (benar -benar mengubah ukuran jendela) | Window.Resizeto (W, H) | Lebar dan tinggi yang ditentukan tidak bisa negatif |
(2) Buka jendela baru
Penggunaan: window.open ([url], [target], [opsi])
URL Parameter: URL yang akan dimuat di jendela baru. Jika tidak ada parameter yang ditentukan, halaman kosong akan dimuat secara default. Misalnya: window.open ("test.htm");
Target parameter: target atau nama jendela yang baru dibuka
_Self memuat halaman baru di jendela saat ini
_blank memuat halaman baru di jendela baru
_parent memuat halaman baru di jendela induk
_top memuat halaman baru di jendela atas
Opsi Parameter: Properti jendela yang baru dibuka terdiri dari beberapa opsi, dipisahkan oleh koma, dan setiap opsi berisi nama dan nilai opsi.
Opsi | menjelaskan |
tinggi | Tinggi jendela, unit piksel |
lebar | Lebar jendela, unit piksel |
kiri | Posisi tepi kiri jendela |
atas | Posisi tepi atas jendela |
layar penuh | Apakah akan menjadi layar penuh, nilai default tidak |
Lokasi | Apakah akan menampilkan bilah alamat, nilai defaultnya adalah ya |
Menubar | Apakah akan menampilkan bilah menu, nilai defaultnya adalah ya |
Dapat diatur ulang | Apakah akan memungkinkan mengubah ukuran jendela, nilai defaultnya adalah ya |
Gulir | Apakah akan menampilkan scrollbars, nilai default ya |
status | Apakah akan menampilkan bilah status, nilai default adalah ya |
TitleBar | Apakah akan menampilkan bilah judul, nilai defaultnya adalah ya |
Toolbar | Apakah akan menampilkan bilah alat, nilai defaultnya adalah ya |
(3) Kotak Prompt Sistem
window.alert menampilkan kotak prompt pesan, penggunaan window.alert ([pesan]); (Catatan: Objek jendela umumnya dihilangkan, dan waspada digunakan langsung)
Window.confirm menampilkan kotak dialog konfirmasi yang mencakup tombol OK dan Batal.
Window.Prompt menampilkan kotak prompt pesan yang berisi kotak input teks.
Penggunaan: window.promppt ([pesan], [default]); Pesan adalah teks yang ditampilkan pada kotak prompt, dan default adalah nilai default kotak teks.
(4) Kontrol status bar
Dikendalikan melalui properti Window.Status. Misalnya: window.status = "prompt kesalahan"; Melakukan hal itu akan memengaruhi pengalaman pengguna, sehingga tidak disarankan untuk memodifikasi informasi bilah status.
(5) Operasi waktunya
Operasi waktu umumnya digunakan fungsi dalam pengembangan web. Dalam pengembangan berdasarkan teknologi AJAX, ada jenis aplikasi yang perlu mengakses server backend secara teratur dan memperbarui halaman Frontend. Jenis implementasi aplikasi ini biasanya tergantung pada fungsi operasi waktu.
Ada empat fungsi operasi waktu: window.setInterval, window.clearinterval, window.setTimeout, dan window.cleartimeout. Keempat fungsi ini adalah metode objek jendela, yang berarti bahwa operasi waktu di browser diselesaikan oleh jendela browser. Berikut ini adalah pengantar terperinci untuk penggunaan keempat metode ini.
① window.setInterval Mengatur timer dan menjalankan jendela kode yang ditentukan.setInterval (kode, waktu);
Deskripsi: Parameter kode dapat berupa fungsi atau kode JavaScript dalam bentuk string
Parameter waktu adalah interval waktu untuk melaksanakan kode, dan unitnya adalah MS.
② window.clearInterval Hapus timer yang diatur oleh jendela Fungsi SetInVal.ClearInterVal (waktu);
③ window.setTimeout mengatur timer dan menjalankan window code yang ditentukan.setTimeout (kode, waktu);
Catatan: Parameter kode dapat berupa fungsi atau kode JavaScript dalam bentuk string. Perbedaan antara SetTimeout dan SetInterval adalah bahwa SetTimeOut hanya menjalankan kode yang ditentukan sekali.
Parameter waktu adalah interval waktu untuk melaksanakan kode, dan unitnya adalah MS.
④ window.cleartimeout Hapus timer yang diatur oleh Window Function SetTimeout.ClearTimeout (waktu);
Penjelasan terperinci di atas objek jendela, salah satu objek browser JavaScript, adalah semua konten yang dibagikan oleh editor. Saya harap ini dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.