JavaScript Window – Mô Hình Đối Tượng Trình Duyệt

Mô Hình Đối Tượng Trình Duyệt (BOM – Browser Object Model) cho phép bạn “nói chuyện” với trình duyệt.


Mô Hình Đối Tượng Trình Duyệt (BOM)

Không có tiêu chuẩn chính thức cho Mô Hình Đối Tượng Trình Duyệt (BOM).

Kể từ khi các trình duyệt hiện đại thực hiện (gần như) tương tự nhau với các phương thức và thuộc tính cho tương tác JavaScript, cái này thường được gọi như các phương thức và thuộc tính của BOM.


Đối tượng Window

Đối tượng window được hỗ trợ bởi tất cả các trình duyệt. Nó xử lý cửa sổ trình duyệt.

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

Các biến toàn cục trở thành thuộc tính của đối tượng cửa sổ.

Các biến toàn cục là phương thức của đối tượng cửa sổ.

Thậm chí đối tượng tài liệu (của HTML DOM) là thuộc tính của đối tượng cửa sổ:

window.document.getElementById("header");

cũng giống như:

document.getElementById("header");

Kích cỡ cửa sổ

Hai thuộc tính có thể sử dụng để xác định kích cỡ của cửa sổ trình duyệt.

Hai thuộc tính trả về kích cỡ dưới dạng pixel:

  • window.innerHeight – chiều cao bên trong của cửa sổ trình duyệt (dạng pixels);
  • window.innerWidth – chiều rộng bên trong của cửa sổ trình duyệt (dạng pixels);

Cửa sổ trình duyệt (khung nhìn trình duyệt) KHÔNG bao gồm thanh công cụ và thanh trượt.

Cho 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;

Ví dụ trên giúp hiển thị chiều cao của cửa sổ trình duyệt: (KHÔNG bao gồm thanh toolbars / scroollbars).


Các phương thức cửa sổ khác

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

  • window.open() – mở một cửa sổ khác;
  • window.close() – đóng cửa sổ hiện tại;
  • window.moveTo() – di chuyển cửa sổ hiện tại;
  • window.resizeTo() – thay đổi kích cỡ cửa sổ hiện tại;