Peristiwa pemuatan jendela:
kejadian kompatibilitas untuk menyesuaikan ukuran jendela:
window Metode .open() dapat digunakan untuk menavigasi ke URL tertentu atau untuk membuka jendela browser baru.
window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");timer:
window.scroll(x, y)
window.scrollTo(x, y): Keduanya sama kegunaannya untuk mengubah posisi horizontal dan scroll bar vertikal, dengan syarat harus ada Scroll bar yang ada di halaman
window.scrollBy(x, y): Pengguliran kumulatif dari scroll bar, angka positif turun, angka negatif naik window.scrollBy(0, 10) : Ketika dipanggil setiap 100 milidetik, bilah gulir menggerakkan
jendela 10 piksel. kotak dialog getComputedStyle(elem, pseudo-class)
alert
menjalankan skrip js dan memasukkan kode js ke dalam tumpukan eksekusi dalam mode eksekusi sinkron. Saat menjalankan tumpukan eksekusi, ia menemukan kode asinkron JS (peristiwa, pengatur waktu, ajax, pemuatan sumber daya , kesalahan) dimasukkan ke dalam API web (antrian tugas). Ketika kode dalam tumpukan eksekusi selesai, buka antrian tugas dan ambil yang pertama untuk dieksekusi. Setelah eksekusi, Dapatkan satu dari antrian tugas dan jalankan, dan jalankan berulang kali (event loop) hingga eksekusi dalam antrian tugas selesai.
window.history digunakan untuk mendapatkan URL alamat halaman saat ini dan mengarahkan browser ke halaman baru.
http://www.itcast.cn:80/index.html?name=andy&age=1#link http: protokol komunikasi www.itcast.cn: nama domain 80: port index.html: path?name=andy&age=1: parameter #link fragment: titik jangkar,
atribut objek tautan:
dari URL saat ini:
navigator: objek yang merangkum informasi konfigurasi browser
window.objek sejarah menyertakan kumpulan riwayat browser (url)
window.objek layar berisi informasi tentang pengguna
// layar: Dapatkan ukuran resolusi perangkat tampilan // Resolusi penuh: screen.widht/height // Cara mengidentifikasi jenis klien yang kompatibel dengan semua lebar klien // Layar besar, layar sedang, layar kecil, layar ultra-kecil // lg md sm xs // Telepon papan pc TV //Lebar >= 1200 >=992 >= 768 < 768 //Resolusi yang tersisa setelah menghapus taskbar // screen.availHeight/availWidth
secara dinamis dapat memperoleh posisi (offset), ukuran, dll. elemen.
Atribut seri offset yang umum digunakan:
atribut umum
seperti ukuran batas dan ukuran elemen elemen
:secara dinamis memperoleh ukuran dan jarak gulir elemen.
Atribut umum
bilah gulir satuan. Saat menggulir, acara onscroll akan dipicu
window.pageXOffset/pageYOffset IE8 dan di bawahnya tidak kompatibel dengan document.body/documentElement.scrollLeft/scrollTop Kompatibilitasnya membingungkan dan membutuhkan waktu lama untuk menambahkan dua nilai, karena tidak mungkin agar dua nilai memiliki nilai pada saat yang sama . Metode kompatibilitas enkapsulasi, temukan jarak bergulir roda bilah gulir getScrollOffet()
/*
Meringkas metode untuk mendapatkan jarak gulir dari bilah gulir. Pengembalian: x: jarak gulir dari bilah gulir horizontal y: jarak gulir dari bilah gulir vertikal */function getScrollOffet(){
if(jendela.halamanXOffset){
return {//{} objek harus setelah kata kunci, jika tidak, sistem akan secara otomatis menambahkannya; maka nilai yang dikembalikan tidak akan ditentukan
x : jendela.halamanXOffset,
y : window.pageYOffset }
}else{//Kompatibel dengan IE8 dan di bawahnya return {
x : dokumen.body.scrollLeft + dokumen.documentElement.scrollLeft,
y : dokumen.body.scrollTop + dokumen.documentElement.scrollTop }
}} window.innerWidth/innerHeight tidak kompatibel dengan IE8 dan di bawahnya (catatan: lebar dan tinggi di sini tidak termasuk tinggi bilah menu, bilah alat, bilah gulir, dll.) document.documentElement.clientWidth/clientHeight dalam mode standar, browser apa pun kompatibel dengan document.body.clientWidth/clientHeight Ini adalah metode kompatibilitas enkapsulasi browser yang cocok untuk situasi aneh. Mengembalikan ukuran viewport browser getViewportOffset()
/*Encapsulation mengembalikan nilai pengembalian ukuran viewport browser :
w: lebar area pandang h: tinggi area pandang*/fungsi getViewportOffset(){
if(jendela.Lebar Dalam){
kembali {
w : jendela.lebar dalam,
h : jendela.innerHeight }
}else{ //Kompatibel dengan browser IE8 dan di bawahnya if(document.compatMode == 'BackCompat'){
//Return { dalam mode rendering yang aneh
w : dokumen.body.clientWidth,
h : dokumen.body.clientHeight }
}kalau tidak{
//Mode standar kembali {
w : dokumen.documentElement.clientWidth,
h : dokumen.documentElement.clientHeight }
}
}}console.log(document.compatMode); // Mode aneh BackCompat // Mode standar CSS1Compat domElement.getBoundingClientRect() memiliki kompatibilitas yang baik; , Atribut seperti atas, kanan, dan bawah. Kiri dan atas mewakili koordinat X dan Y dari sudut kiri atas elemen. Kanan dan bawah mewakili koordinat X dan Y dari sudut kanan bawah elemen Atribut lebar tidak diterapkan di IE versi lama. Hasil yang dikembalikan tidak real-time. '
// Dapatkan posisi elemen dalam fungsi dokumen getElementPosition(target){
//Mendukung metode BoundingClientRect() if(0 && target.getBoundingClientRect){
var pos = target.getBoundingClientRect();
return { // Saat bilah gulir bergerak, tambahkan posisi x bilah gulir: pos.left + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft),
y : pos.top + Math.max(document.body.scrollTop, document.documentElement.scrollTop)
}
} kalau tidak {
var pos = {
kiri: 0,
atas : 0
}
var _elm = sasaran;
while(target.offsetParent){
if(_elm == target){//Akumulasi kiri dan atas untuk pertama kalinya
pos.kiri += target.offsetKiri;
pos.top += target.offsetTop;
}kalau tidak{
pos.kiri += target.offsetLeft + target.klienLeft;
pos.top += target.offsetTop + target.clientTop;
}
// target menugaskan kembali target = target.offsetParent;
}
kembali { x : pos.kiri, y : pos.atas}
}} status bar
posisi jendela
tampilan status browserdan atribut