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

Mô hình đối tượng trình duyệt (BOM) cho phép JavaScript “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). Vì các trình duyệt hiện đại đã triển khai (gần như) các phương thức và thuộc tính tương tự cho tính tương tác JavaScript, nó thường được gọi là 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ó đại diện cho cửa sổ trình duyệt. Tất cả các đối tượng JavaScript toàn cục, các hàm và các biến tự động trở thành các một phần của đối tượng window.

Biến toàn cục là các thuộc tính của đối tượng window. Các hàm toàn cục là các phương thức của đối tượng window. Ngay cả đối tượng tài liệu (của HTML DOM) là một thuộc tính của đối tượng window:

window.document.getElementById(“header”);

tương tự như:

document.getElementById(“header”);

Kích thước window

Hai thuộc tính có thể được sử dụng để xác định kích thước của cửa sổ trình duyệt. Cả hai thuộc tính đều trả lại các kích thước theo pixel:

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

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 cuộn.

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

• document.documentElement.clientHeight
• document.documentElement.clientWidth
• or
• document.body.clientHeight
• document.body.clientWidth

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

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

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

Ví dụ 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ụ / thanh cuộn).

Phương thức Window khác

• window.open() – mở một cửa sổ
• 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 thước cửa sổ hiện tại