---
title: "Tìm hiểu thêm về Window Object trong Javascript"
description: "Nếu các bạn đã xem các bài trước thuộc series JavasScript cơ bản của mình hoặc đã xem các tài liệu khác thì chắc hẵn đã từng thấy trong bài viết có đề cập đến ông thần window object rồi nhỉ 😉. Vậy trong bài này, chúng ta sẽ cùng nhau tìm hiểu về nó để xem window object là loại object như thế nào nhé"
canonical: "https://200lab.io/blog/tim-hieu-them-ve-window-object-trong-javascript"
published: "2021-09-11T15:21:33Z"
updated: "2026-08-21T07:17:56Z"
authors: ["TỪ QUỐC HƯNG"]
tags: ["Javascript"]
reading_minutes: 6
access: "public"
---

Nếu các bạn đã xem các bài trước thuộc series JavasScript cơ bản của mình hoặc đã xem các tài liệu khác thì chắc hẵn đã từng thấy trong bài viết có đề cập đến ông thần `window` **object** rồi nhỉ 😉. Vậy trong bài này, chúng ta sẽ cùng nhau tìm hiểu về nó để xem `window` **object** là loại object như thế nào nhé 😁.

## I. BOM là cái gì?

**BOM**? Có vẻ như từ này khá lạ với các bạn phải không 😁, thực chất từ này là viết tắt của cụm từ **B**rowser **O**bject **M**odel - nghĩa là các object liên quan đến trình duyệt mà thôi.

Mỗi trình duyệt khác nhau sẽ có các object hơi khác một chút, do đó giữa các **BOM **với nhau sẽ không có một chuẩn chung nào cả. Có thể bạn chưa biết, **DOM **và các thông báo dạng **popup **ở ngoài màn hình cũng nằm trong **BOM **group đấy 😉.

## II. Window object là object gì?

Rồi! Giờ đến ông thần `window` object này. Như tên gọi của nó, nó là object có tác động đến cửa sổ trình duyệt của chúng ta và nó cũng được tích hợp lên hầu hết các trình duyệt ngày nay.

Cùng xem thử ta có thể dùng nó để tác động lên cửa sổ trình duyệt của chúng ta như thế nào nhé 😁.

### 1. Lấy thông số của cửa sổ trình duyệt.

Như mình đã nói ở trên, thì mỗi trình duyệt sẽ có BOM hơi khác nhau một chút dó đó cách lấy thông tin ra cũng hơi khác tý.

```
//Lấy chiều dài của của sổ trình duyệt
window.innerWidth;
document.documentElement.clientWidth;
document.body.clientWidth;

//Lấy chiều cao của của sổ trình duyệt
window.innerHeight;
document.documentElement.clientHeight;
document.body.clientHeight;

```

Đối với trình duyệt **chrome **thì cả 3 các lấy thông tin cửa sổ đều chạy tốt nha 😁

**Lưu ý:**

![](https://assets.200lab.io/images/2024/12/05/window-object-01-c1619bbdda72557d0d30.webp)

### 2. Mở một của sổ trình duyệt mới.

Để mở một cửa sổ trình duyệt mới, ta dùng hàm `open()` với cú pháp như sau:

```
window.open(url, name, specs, replace);
```

**Chú thích:**

- **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: **Đây là các thông số cho cửa sổ như:

   - Chiều cao của trình duyệt: height (đơn vị pixel).

   - Chiều rộng của trình duyệt: width (đơn vị pixel).

   - Vị trí hiển thị của của sổ trình duyệt: top (đơn vị pixel), left (đơn vị pixel).

   - Hiển thị thanh menu: **yes|1** hoặc **no|0**.

   - Hiển thị thanh trạng thái: **yes|1** hoặc **no|0**.

- **replace: **\[Có thể có hoặc không\] 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` hoặc `false`).

```
window.open('https://200lab.io/', '200lab Education - Học viện đào tạo kỹ sư Golang và Flutter', 'width=500,height=600');
```

Kết quả:

![](https://assets.200lab.io/images/2024/12/05/window-2-5ff6085ebfd1d3cbc770.webp)

### 3. Đóng một cửa sổ trình duyệt bất kỳ.

Để đóng một cửa sổ trình duyệt bất kỳ ta dùng hàm `close()` của `window` object và kèm theo đó là đối tượng cửa sổ mà ta muốn đóng.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo window</title>
</head>
<body>
    <div>Click vào button để xem kết quả</div>
	<button type="button" onclick="openNewWindow()">Mở cửa sổ</button>
	<button type="button" onclick="closeWindow()">Đóng cửa sổ</button>
    <script>
        let newWindow = null;

        function openNewWindow() {
            newWindow = window.open('https://200lab.io/', '200lab Education - Học viện đào tạo kỹ sư Golang và Flutter', 'width=500,height=600');
        }

        function closeWindow() {
	        newWindow.close();
        }
    </script>
</body>
</html>
```

Các bạn tự chạy thử nha 😁.

### 4. Di chuyển của sổ trình duyệt trên màn hình.

Ta có thể điều chỉnh vị trí cho cửa sổ trình duyệt xuất hiện ở mọi vị trí trên màn hình của mình. Điều đầu tiên là ta phải biết cửa sổ trình duyệt mà ta muốn di chuyển sau đó dùng hàm `moveTo()` để thực hiện. Cú pháp của nó như sau:

```
winObject.moveTo(top,left)
```

**Chú thích**: `winObject` là đối tượng cửa sổ trình duyệt mà bạn muốn thực hiện.

Ví dụ:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo window</title>
</head>
<body>
    <div>Click vào button để xem kết quả</div>
	<button type="button" onclick="openNewWindow()">Mở cửa sổ</button>
	<button type="button" onclick="moveWindow()">Di chuyển cửa sổ</button>
    <script>
        let newWindow = null;

        function openNewWindow() {
            newWindow = window.open('https://200lab.io/', '200lab Education - Học viện đào tạo kỹ sư Golang và Flutter', 'width=300,height=200');
        }

        function moveWindow() {
	        newWindow.moveTo(200, 400);
            newWindow.focus();
        }
    </script>
</body>
</html>
```

### 5. Thay đổi kích thước của cửa sổ trình duyệt.

Để thay đổi kích thước cửa sổ trình duyệt ta cầ n xác định được đối tượng cửa sổ trình duyệt mà ta muốn thay đổi và kết hợp với hàm `resizeTo()`.

```
winObject.resizeTo(width,height);
```

**Chú thích**: `winObject` là đối tượng cửa sổ trình duyệt mà bạn muốn thực hiện.

Ví dụ:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo window</title>
</head>
<body>
    <div>Click vào button để xem kết quả</div>
	<button type="button" onclick="openNewWindow()">Mở cửa sổ</button>
	<button type="button" onclick="resizeWindow()">Thay đổi kích thước cửa sổ</button>
    <script>
        let newWindow = null;

        function openNewWindow() {
            newWindow = window.open('https://200lab.io/', '200lab Education - Học viện đào tạo kỹ sư Golang và Flutter', 'width=300,height=200');
        }

        function resizeWindow() {
	        newWindow.resizeTo(500, 700);
            newWindow.focus();
        }
    </script>
</body>
</html>
```

## II. Tổng kết.

Trên đây là giới thiệu sơ lượt về khái niệm **BOM** là gì? **window **object là gì? kèm theo là một vài ví dụ về các **window object properties** đơn giản ngoài ra nó còn nhiều lắm nhé 😁. Nếu có nhu cầu biết thêm về tất cả các **properties **của ông thần này thì bạn có thể tìm đọc [tại đây](<https://www.w3schools.com/jsref/obj_window.asp>) nhé 😉.

 Cảm ơn các bạn đã đọc 🤗

## Đọc thêm

- [Event Loop là gì? Cơ chế hoạt động của Event Loop trong JavaScript](https://200lab.io/blog/event-loop-la-gi.md): Event Loop là một cơ chế cho phép xử lý các tác vụ bất đồng bộ trong JavaScript, sử dụng một vòng lặp vô tận để kiểm tra, quản lý các tác vụ.
- [So sánh Golang và NodeJS chi tiết](https://200lab.io/blog/so-sanh-golang-vs-nodejs.md): Golang và NodeJS khác nhau như thế nào? Golang và Nodejs từ lâu đã trở thành chủ đề sôi nổi. Nodejs đã chiếm ưu thế trong một khoảng thời gian dài. Golang liệu có đủ sức thuyết phục để chuyển đổi?
- [ReactJS Tutorial for Beginners Phần 2](https://200lab.io/blog/reactjs-tutorial-for-beginners-phan-2.md): Trong bài viết này chúng ta sẽ đi qua năm nội dung đầu tiên của tutorial
- [ReactJS vs React Native - Gà cùng một mẹ liệu có giống nhau?](https://200lab.io/blog/reactjs-vs-react-native.md): Bạn có đang rối giữa ReactJS vs React Native? Nên chọn cái nào thì tốt hơn? Có thể tái sử dụng code của ReactJS cho React Native hay không? Hãy khám phá câu trả lời thông qua bài viết so sánh ReactJS vs React Native này bạn nhé!
- [Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 7](https://200lab.io/blog/netflix-clone-voi-reactjs-styled-components-va-firebase-firestore-auth-phan-7.md): Nối tiếp phần 6 của series, trong phần này, chúng ta sẽ bắt tay vào code Sign Up page,config lại phần router để đáp ứng được vấn đề Authentication kèm theo tạo custom hook để listening for Authentication. Không dài dòng nữa, Chúng ta bắt đầu thôi 😁.
- [Mọi bài viết chủ đề Javascript](https://200lab.io/blog/tags/javascript.md)

Toàn bộ nội dung: https://200lab.io/llms.txt