JavaScript Window - Mô hình đối tượng trình duyệt

Browser Object Model (Browser Object Model (BOM) cho phép JavaScript đối thoại với trình duyệt.

Browser Object Model (BOM)

Không tồn tại tiêu chuẩn chính thức cho Browser Object Model (BOM).

Các trình duyệt hiện đại đã (hầu như) thực hiện các phương pháp và thuộc tính tương tác JavaScript tương tự, vì vậy nó thường được nhắc đến như các phương pháp và thuộc tính của BOM.

Đối tượng Window

Tất cả các trình duyệt đều hỗ trợ window Đối tượng. Nó đại diện cho cửa sổ trình duyệt.

Tất cả các đối tượng JavaScript toàn cục, hàm và biến tự động trở thành thành viên của đối tượng window.

Biến toàn cục là thuộc tính của đối tượng window.

Hàm toàn cục là phương pháp của đối tượng window.

Thậm chí (đối tượng HTML DOM) document cũng là thuộc tính của đối tượng window:

window.document.getElementById("header");

Tương đương với:

document.getElementById("header");

Kích thước cửa sổ

Cả hai thuộc tính có thể được sử dụng để xác định kích thước cửa sổ trình duyệt.

Cả hai thuộc tính đều trả về kích thước bằng pixel:

  • window.innerHeight - Chiều cao nội bộ cửa sổ trình duyệt (được tính bằng pixel)
  • window.innerWidth - Chiều rộng nội bộ cửa sổ trình duyệt (được tính bằng pixel)

Cửa sổ trình duyệt (khoảng truy cập trình duyệt) không bao gồm thanh công cụ và thanh cuộn.

Đối với Internet Explorer 8, 7, 6, 5:

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

hoặc

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

Một giải pháp JavaScript thực tế (bao gồm tất cả các trình duyệt):

Ví dụ

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

Thử trực tiếp

Ví dụ này hiển thị chiều cao và chiều rộng của cửa sổ trình duyệt (không bao gồm thanh công cụ và thanh cuộn):

Phương pháp cửa sổ khác

Một số phương pháp khác:

  • window.open() - Mở cửa sổ mới
  • window.close() - Đóng cửa sổ hiện tại
  • window.moveTo() - Di chuyển cửa sổ hiện tại
  • window.resizeTo() - Điều chỉnh lại cửa sổ hiện tại