Ecmascript adalah inti dari JavaScript, tetapi saat menggunakan JavaScript di web, kemudian BOM (Model Objek Browser) adalah inti nyata.
Objek inti BOM adalah jendela, yang mewakili instance browser.
Di browser, objek jendela merupakan antarmuka untuk JavaScript untuk mengakses jendela browser dan objek global yang ditentukan oleh ECMASCRIPT. Artinya, variabel, objek, dan fungsi apa pun yang ditentukan dalam halaman web mengambil jendela sebagai objek globalnya.
1. Lingkup Global
Karena objek jendela memainkan peran objek global, semua objek, variabel dan fungsi yang dinyatakan dalam ruang lingkup global akan menjadi properti dan metode windows.
Masih ada perbedaan antara mendefinisikan variabel global dan mendefinisikan atribut pada objek jendela: Variabel global tidak dapat dihapus melalui Delete, sedangkan atribut yang ditentukan pada objek jendela OK.
VaR usia = 28; window.color = "merah"; // Di IE <9, kesalahan dilemparkan, dan window delete palsu dikembalikan di browser lain; // Di IE <9, kesalahan dilemparkan, dan window hapus yang sebenarnya. Color dikembalikan di browser lain; // return true alert (window.age); // 28 Peringatan (Window.Color); //belum diartikan
Saat menambahkan atribut jendela menggunakan pernyataan VAR, ada properti bernama [[dapat dikonfigurasi]]. Nilai properti ini diatur ke false, sehingga atribut yang didefinisikan dengan cara ini tidak dapat dihapus oleh Delete.
Kesalahan akan dilemparkan ketika mencoba mengakses variabel yang tidak dideklarasikan, tetapi dengan menanyakan objek jendela, Anda dapat mengetahui apakah kemungkinan variabel yang tidak dideklarasikan ada.
// kesalahan dilemparkan ke sini karena OldValue tidak menyatakan var newValue = oldValue; // Kesalahan tidak dilemparkan ke sini karena ini adalah kueri properti var newValue = window.oldValue // alert (newValue); //belum diartikan
Faktanya, banyak objek JavaScript global seperti localtion dan navigasi sebenarnya adalah properti dari objek jendela.
2. Hubungan dan kerangka jendela
Jika halaman berisi bingkai, setiap bingkai memiliki objek jendela sendiri dan disimpan dalam koleksi bingkai.
Dalam koleksi bingkai, dapat diakses melalui indeks numerik atau nama bingkai.
<html> <head> <title> Contoh frameset </iteme> </head> <frameset rows = "160,*"> <frame src = "frame.htm" name = "Topframe"> <frameset cols = "50%, 50%"> <frame src = "outterframe.htm" name ". Name = "RightFrame"> </frameset> </fameset> </html>
Untuk contoh ini, kerangka kerja di atas dapat direferensikan oleh window.frames [0] atau window.frames ["topframe"]. Namun, yang terbaik adalah menggunakan top.frames [0] untuk mengakses kerangka kerja.
Objek teratas selalu menunjuk ke kerangka kerja lapisan tertinggi (luar), yaitu jendela browser. Menggunakannya memastikan bahwa bingkai lain diakses dengan benar dalam satu bingkai.
Objek jendela lain yang berlawanan dengan objek atas adalah induk, objek induk selalu menunjuk ke kerangka kerja atas langsung kerangka kerja saat ini.
Ada juga objek diri , yang selalu menunjuk ke jendela. Bahkan, diri dan jendela dapat digunakan satu sama lain. Tujuan memperkenalkan objek diri hanya sesuai dengan objek atas dan induk.
Semua objek ini adalah sifat jendela dan dapat digunakan dengan window.parent atau window.top.
3. Lokasi Jendela
Sebagian besar browser menyediakan screenleft dan screentop, yang digunakan untuk mewakili posisi jendela relatif ke sisi kiri dan atas layar, masing -masing. FF memberikan informasi jendela yang sama di screenx dan properti Screeney, dan Safari Jumlah Chorme juga mendukung kedua properti ini secara bersamaan.
Gunakan kode berikut untuk mendapatkan posisi kiri dan atas jendela melintasi browser.
var leftpos = (typeof window.screenleft == "nomor")? window.screenleft: window.screenx; var toppos = (typeof window.screentop == "number")? window.screentop: window.screeny;
Perlu dicatat bahwa di IE dan Opera, Screenleft dan Screentop menyimpan jarak dari sisi kiri dan atas layar ke area yang terlihat dari halaman yang diwakili oleh objek jendela. Dalam Chrome, FF, dan Safari, Screeney dan Screentop menyimpan nilai koordinat dari seluruh browser ke layar.
Hasil akhirnya adalah bahwa nilai koordinat yang tepat di sisi kiri dan atas jendela tidak dapat diperoleh dalam kondisi lintas-browser.
Menggunakan metode moveto () dan moveby (), jendela dapat dipindahkan secara akurat ke posisi baru. Kedua metode menerima dua parameter. MOVETO () menerima koordinat sumbu X dan Y, dan Moveby () menerima piksel yang bergerak.
// pindahkan layar ke moveto kiri atas (0,0); // pindahkan jendela yang ditinggalkan oleh 50px moveby (-50,0);
Namun, kedua metode ini dapat dinonaktifkan oleh browser. Kedua metode ini hanya berlaku untuk objek jendela terluar dan tidak berlaku untuk kerangka kerja.
4. Ukuran jendela
Browser Mainstream menyediakan 4 properti untuk menentukan ukuran jendela: Innerwidth, bagian dalam, luar, dan luar.
Dalam IE9+, Safari, dan FF, Outerwidth dan Outhight mengembalikan ukuran jendela browser itu sendiri (terlepas dari apa pun akses dari kerangka kerja), tetapi di opera, nilai -nilai dari dua properti ini mewakili ukuran wadah tampilan halaman (ukuran jendela tab tunggal). Batinwidth dan Baternight mewakili ukuran tampilan halaman dalam wadah (dikurangi lebar perbatasan). Tetapi di Chrome, 4 properti ini semuanya mewakili ukuran viewport daripada ukuran browser.
IE9 tidak memberikan atribut untuk mendapatkan ukuran jendela browser sebelumnya; Namun, ini memberikan informasi tentang area visual halaman melalui DOM.
Dalam IE, FF, Chrome, Opera, dan Safari, informasi Halaman Viewport disimpan di Document.documentelement.clientwidth dan document.documentelement.clienthight. Di IE6, harus efektif dalam mode standar. Jika itu adalah mode promiscuous, informasi yang sama harus diperoleh melalui document.body.clientwidth dan document.body.clienthight. Chrome tidak membedakan antara mode standar atau mode campuran.
Meskipun ukuran jendela browser itu sendiri tidak dapat ditentukan pada akhirnya, ukuran halaman viewport dapat diperoleh.
var pagewidth = window.innerwidth, pageHeight = window.innerheight; if (typeOf pagewidth! = "number") {if (document.compatmode == "css1compat") {pagewidth = document.documentelement.clientwidth; pageHeight = document.documentelement.clientHeight; } else {pagewidth = document.body.clientwidth; pageHeight = document.body.clientHeight; }} peringatan ("Lebar:" + pagewidth); alert ("Height:" + PageHeight);Untuk perangkat seluler, window.innerwidth dan window. Browser IE Mobile perlu mendapatkan informasi yang sama melalui document.documentelement.clientwidth dan document.documentelement.clienthight.
Metode resizeto () dan ubahzeby () dapat digunakan untuk menyesuaikan ukuran jendela browser. Kedua metode menerima dua parameter. RESIZETO () menerima lebar baru dan ketinggian baru dari jendela browser, dan ubahzeBy () menerima perbedaan lebar dan perbedaan tinggi antara jendela baru dan jendela lama.
// Sesuaikan ke 100*100 resizeto (100.100); // Sesuaikan dengan 200*150 Moveby (100,50);
Namun, kedua metode ini dapat dinonaktifkan oleh browser. Kedua metode ini hanya berlaku untuk objek jendela terluar dan tidak berlaku untuk kerangka kerja.
5. Navigasi dan Buka Windows
Metode window.open () dapat membuka URL tertentu atau jendela browser baru. Metode ini menerima 4 parameter: URL, target jendela, string fitur dan nilai boolean yang menunjukkan apakah halaman baru menggantikan halaman saat ini.
muncul
Berbagai parameter
Di antara mereka, ya/tidak juga dapat digunakan 1/0; PixelValue adalah nilai spesifik, unit piksel.
Parameter | Rentang nilai | Keterangan
Selalu Diturunkan | Ya/Tidak | Tentukan jendela tersembunyi di balik semua jendela
SELALU SELALU | YA/TIDAK | Tentukan windows yang ditangguhkan di semua jendela
Tergantung | Ya/Tidak | Apakah jendela induk ditutup pada saat yang sama
Direktori | Ya/Tidak | Apakah kolom direktori NAV2 dan 3 terlihat?
Tinggi | PixelValue | Tinggi Jendela
Hotkeys | Ya/Tidak | Setel Safe Exit Hotkey di Jendela Tanpa Menu Bar
InnerHeight | PixelValue | tinggi piksel dokumen di jendela
Innerwidth | PixelValue | Pixelwidth of Document in Window
Lokasi | Ya/Tidak | Apakah Lokasi Bilah Terlihat?
Menubar | Ya/Tidak | Apakah bilah menu terlihat?
OuteHeight | PixelValue | Atur ketinggian piksel jendela (termasuk perbatasan dekoratif)
Outerwidth | PixelValue | Mengatur lebar piksel jendela (termasuk perbatasan dekoratif)
dapat diputar ulang | ya/tidak | apakah ukuran jendela dapat disesuaikan?
screenx | pixelvalue | Panjang pixelle jendela ke batas kiri layar
SCREEDEY | PIXELVALUE | PANJANG PIXELLE Jendela ke Batas Layar Atas Layar
Gulir | Ya/Tidak | Apakah ada gulir di jendela
TitleBar | Ya/Tidak | Apakah kolom judul jendela terlihat?
Toolbar | Ya/Tidak | Apakah toolbar jendela terlihat?
Lebar | PixelValue | Lebar piksel jendela
Z-Look | Ya/Tidak | Apakah jendela mengapung di jendela lain setelah diaktifkan
Contoh:
window.open ('page.html', 'newwindow', 'height = 100, width = 400, top = 0, kiri = 0, toolbar = tidak, menubar = tidak, scrollbars = tidak, dapat diputar ulang = tidak, lokasi = tidak, status = tidak')Setelah skrip dijalankan, Page.html akan dibuka dalam bentuk baru NewWindow, dengan lebar 100, tinggi 400, 0 piksel dari bagian atas layar, 0 piksel dari kiri layar, tidak ada bilah alat, tidak ada bilah menu, tidak ada bilah gulir, tidak ada ubah ukuran, tidak ada bilah alamat, dan tidak ada bilah status.
6. Panggilan intermiten dan panggilan timeout
JavaScript adalah bahasa utuh tunggal, tetapi memungkinkan eksekusi kode penjadwalan pada saat tertentu dengan menetapkan nilai batas waktu dan waktu interval. Yang pertama menjalankan kode setelah waktu yang ditentukan, sedangkan yang terakhir dipanggil sekali untuk setiap waktu yang ditentukan.
Timeout Call SetTimeOut ()
Metode setTimeout () menerima dua parameter, parameter pertama adalah fungsi, dan parameter kedua adalah waktu (satuan mikrodetik), yang mengembalikan ID numerik.
setTimeOut (function () {alert ("Hello!");}, 1000);Setelah menelepon setTimeout (), metode ini akan mengembalikan ID numerik, menunjukkan panggilan batas waktu, dan panggilan batas waktu dapat dibatalkan.
var timeoutId = setTimeOut (function () {alert ("Hello!");}, 1000); ClearTimeout (timeoutId);SetInterval panggilan intermiten ()
Metode setInterval () menerima dua parameter, parameter pertama adalah fungsi, parameter kedua adalah waktu (unit mikrodetik), dan mengembalikan ID numerik
setInterval (function () {alert ("Hello!");}, 1000);Batalkan Panggilan ke ClearInterval () dan terima ID panggilan intermiten parameter
var intervalid = null; var span = document.createElement ("span"); // Buat span span span.id = "waktu"; // atur span id document.body.appendChild (span); // tambahkan fungsi span sprementNumber () {var sekarang = tanggal baru (); var timestr = now.tolocaletimestring (); span.innerText = timestr; num ++; if (num == 10) {clearInterval (intervalID); // Waktu tetap tidak berubah setelah sepuluh detik}} intervalid = setInterval (IncrementNumber, 1000);Cobalah untuk menggunakan panggilan batas waktu alih -alih panggilan intermiten
var num = 0; var max = 10; function incrementNumber () {num ++; if (num <max) {setTimeout (incrementNumber, 1000); } else {alert ("ok"); }} setTimeout (IncrementNumber, 1000);7. Kotak Dialog Sistem
Peringatan kotak peringatan ()
waspada ("Selamat datang!");Kotak Informasi Konfirmasi () memiliki tombol batal
if (konfirmasi ("Apakah Anda setuju?")) {alert ("Setuju"); } else {alert ("tidak setuju"); }Prompt (), meminta pengguna untuk memasukkan beberapa teks
var result = prompt ("Anda menghormati nama keluarga Anda?", ""); if (hasilnya! == null) {waspada ("selamat datang," +hasil); }Penjelasan terperinci di atas dari BOM (objek jendela) di 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.