Đố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;

Xem Kết Quả

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:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Toidicode.com demo window</title>
</head>
<body>
    <div>Click vào button để xem kết quả</div>
    <button type="button" onclick="openW()">Mở cửa sổ</button>
    <script type="text/javascript">
    function openW() {
        window.open('http://toidicode.com', 'toidicode', 'width=500,height=600');
    }
    </script>
</body>

</html>

Xem Kết Quả

Đó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:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Toidicode.com demo window</title>
</head>

<body>
	<div>Click vào button để xem kết quả</div>
	<button type="button" onclick="openW()">Mở cửa sổ</button>
	<button type="button" onclick="closeW()">Đóng cửa sổ</button>
	<script type="text/javascript">
		function openW() {
			toidicode = window.open('http://toidicode.com', 'toidicode', 'width=500,height=600');
		}

		function closeW() {
			toidicode.close();
		}
	</script>
</body>

</html>

Xem Kết Quả

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:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Toidicode.com demo window</title>
</head>

<body>
	<div>Click vào button để xem kết quả</div>
	<button type="button" onclick="openW()">Mở cửa sổ</button>
	<button type="button" onclick="moveW()">Di chuyển cửa sổ</button>
	<script type="text/javascript">
		function openW() {
			toidicode = window.open('', '', 'width=300,height=200');
		}

		function moveW() {
			toidicode.moveTo(200,400);
            toidicode.focus();
		}
	</script>
</body>

</html>

Xem Kết Quả

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:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Toidicode.com demo window</title>
</head>

<body>
	<div>Click vào button để xem kết quả</div>
	<button type="button" onclick="openW()">Mở cửa sổ</button>
	<button type="button" onclick="resizeW()">Thay đổi kích cỡ</button>
	<script type="text/javascript">
		function openW() {
			toidicode = window.open('', '', 'width=300,height=200');
		}

		function resizeW() {
			toidicode.resizeTo(500,700);
            toidicode.focus();
		}
	</script>
</body>

</html>

Xem Kết Quả