Window JavaScript - Model Objek Browser

Model Objek Browser (Browser Object Model (BOM) memungkinkan JavaScript berbicara dengan browser.

Model Objek Browser (Browser Object Model (BOM))

Tidak ada standar resmi untuk Model Objek Browser (BOM).

Browser modern telah (hampir) melaksanakan metode dan properti interaksi JavaScript yang sama, sehingga sering disebut metode dan properti BOM.

Objek Window

Semua browser mendukung window Objek. Ini mewakili jendela browser.

Semua objek JavaScript global, fungsi dan variabel menjadi anggota otomatis objek window.

Variabel global adalah properti objek window.

Fungsi global adalah metode objek window.

bahkan (objek HTML DOM) objek document adalah properti objek window:

window.document.getElementById("header");

Sama dengan:

document.getElementById("header");

Ukuran jendela

Kedua properti ini dapat digunakan untuk menentukan ukuran jendela browser.

Kedua properti ini kembalikan ukuran dalam piksel:

  • window.innerHeight - Tinggi jendela browser (dalam piksel)
  • window.innerWidth - Lebar jendela browser (dalam piksel)

Jendela browser ( viewport browser) tidak termasuk toolbar dan scrollbar.

Untuk Internet Explorer 8, 7, 6, 5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

atau

  • document.body.clientHeight
  • document.body.clientWidth

Solusi JavaScript yang Praktis (termasuk semua browser):

Contoh

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Coba Sendiri

Contoh menunjukkan tinggi dan lebar jendela browser (tidak termasuk toolbar dan scrollbar):

Metode Jendela Lainnya

Beberapa metode lainnya:

  • window.open() - membuka jendela baru
  • window.close() - menutup jendela saat ini
  • window.moveTo() - pemindahan jendela saat ini
  • window.resizeTo() - mengubah kembali ukuran jendela saat ini