Điện thoại/ Zalo
0389934723
Bài 17: Đối tượng window trong javascript
Sau khi đã được tìm hiểu về DOM trong javascript rồi, thì bài này sẽ là bài mở đầu cho series BOM trong javascript.
1, BOM trong javascript là gì?
– BOM (Browser Object Model) là các đối tượng liên quan đến trình duyệt và mỗi một trình duyệt sẽ có những đối tượng khác nhau nên giữa các BOM với nhau nó sẽ không tồn tại một chuẩn chung nào cả.
-Đối với DOM mà chúng ta đã được học trong các bài trước cũng là một BOM (nằm trong BOM window). Và đối với các dạng thông báo ra ngoài màn hình cũng thế (nằm trong BOM popup).
2, Đối tượng Window.
-Đối tượng window có tác dụng như với tên của nó là tác động đến của sổ trình duyệt, và đến thời điểm mình viết bài này thì nó đã được suport trên hầu hết các trình duyệt hiện nay.
Lấy thông số của cử sổ trình duyệt.
-Như mình đã nói ở trên là: ‘Mỗi một trình duyệt sẽ có một BOM khác nhau‘, nên để lấy được thông số chiều rộng chiều cao của cửa sổ trình duyệt thì chúng ta sẽ phải sử dụng các toán tử logic duyệt qua các thuộc tính lấy chiều rộng, chiều cao của đối tượng window tương ứng với từng trình duyệt.
//Lấy chiều rộng của trình duyệt
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
//Lấy chiều cao của trình duyệt
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
Mở một cửa sổ mới
-Để mở một cửa sổ mới trên trình duyệt với đối tượng window thì chúng ta sẽ sử dụng phương thức open() với cú pháp như sau:
window.open(url, name, specs, replace);
Trong đó:
- url là địa chỉ mà chúng ta muốn mở.
- name là tên bạn muốn đặt cho cửa sổ
- specs là các thông số cho cửa sổ như:
- Chiều cao của trình duyệt: height=pixel
- Chiều rộng của trình duyệt: width=pixel
- Vị trí hiển thị của của sổ trình duyệt: top=pixel(cách trên), left=pixel(các trái)
- Hiển thị thanh menu: yes|1 là có, no|0 là không.
- Hiển thị thanh trạng thái: yes|1 là có, no|0 là không.
- replace (không bắt buộc) là chỉ định xem URL có tạo ra mục nhập mới hay thay thế mục hiện tại trong danh sách lịch sử không. True là có và false là không.
VD:
Toidicode.com demo window
Click vào button để xem kết quả
function openW() {
window.open('http://toidicode.com', 'toidicode', 'width=500,height=600');
}
Đóng một của sổ
-Để đóng một cửa sổ bằng javascript thì chúng ta cần phải biết được đối tượng cửa sổ mà ta muốn đóng, đối tượng đó chính là .
Cú Pháp:
wObject.close();
Trong đó: wObject là đối tượng window mà chúng ta cần đóng.
VD:
Toidicode.com demo window
Click vào button để xem kết quả
function openW() {
toidicode = window.open('http://toidicode.com', 'toidicode', 'width=500,height=600');
}
function closeW() {
toidicode.close();
}
Di chuyển trình duyệt
-Cũng giống như đóng trình duyệt, để di chuyển trình duyệt thì bạn cũng cần biết được đối tượng trình duyệt cần di chuyển.
Cú pháp:
wObject.moveTo(top,left)
Trong đó: wObject là đối tượng window mà chúng ta cần di chuyển. Top là khoảng các trên, left khoảng cách trái.
VD:
Toidicode.com demo window
Click vào button để xem kết quả
function openW() {
toidicode = window.open('', '', 'width=300,height=200');
}
function moveW() {
toidicode.moveTo(200,400);
toidicode.focus();
}
Thay đổi kích thức cửa sổ
-Để thay đổi kích thước của trình duyệt thì chúng ta cũng cần phải biết được đối tượng cửa sổ cần thay đổi. Và sử dụng với cú pháp sau:
wObject.resizeTo(width,height);
Trong đó: wObject là đối tượng window mà chúng ta cần thay đổi kích cỡ. width,height là chiều rộng và chiều cao mới của trình duyệt.
VD:
Toidicode.com demo window
Click vào button để xem kết quả
function openW() {
toidicode = window.open('', '', 'width=300,height=200');
}
function resizeW() {
toidicode.resizeTo(500,700);
toidicode.focus();
}
3, Lời kết.
-Phần trên mình chỉ giới thiệu với mọi người một số hàm thông dụng thôi, còn các bạn muốn biết thêm thì có thể lên google search nhé!.
