Cách dùng đối tượng window trong Javascript

Trong bài này chúng ta sẽ tìm hiểu đối tượng window trong Javascript, qua đó sẽ giúp bạn biết được danh sách các phương thức và thuộc tính của window object.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Đối tượng window có rất nhiều thuộc tính và phương thức riêng. Ví dụ, đối tượng document là một thuộc tính của window (window.document). Vì vậy, ta có thể ví window là một đối tượng toàn cục và có cấp độ cao nhất trong sơ đồ object BOM của Javascript.

Bây giờ chúng ta sẽ tìm hiểu các thuộc tính và phương thức của đối tượng window nhé.

1. Window trong javascript là gì?

Trong javascript, window là một đối tượng thuộc nhóm BOM - tức là một object có những phương thức và thuộc tính được dùng để xử lý trình duyệt.

Bài viết này được đăng tại [free tuts .net]

Công dụng của window chủ yếu là các thao tác với trình duyệt như: Tính chiều cao - di chuyển - thay đổi kích thước - mở ra một tab mới - lấy đường dẫn url của website. Vì vậy, nếu bạn đang xây dựng giao diện responsive thì sẽ cần sử dụng đến đối tượng này.

2. Window.innerHeight - lấy kích thước trình duyệt

Để lấy kích thước chiều cao và chiều rộng của trình duyệt thì chúng ta sử dụng đối tượng window, tuy nhiên với mỗi trình duyệt thì có những cách lấy khác nhau.

Đối với Internet Explorer, Chrome, Firefox, Opera, và Safari thì cú pháp như sau:

// lấy chiều cao
var heightBrowser = window.innerHeight;

// lấy chiều rộng
var widthBrowser = window.innerWidth;

Đối với Internet Explorer các version 5,6,7,8 thì cú pháp như sau:

// Lấy chiều cao
var height = document.documentElement.clientHeight;
// hoặc
var height = document.body.clientHeight;

// Lấy chiều rộng
var width = document.documentElement.clientWidth;
// hoặc
var width = document.body.clientWidth;

Việc tương thích với các trình duyệt quá rắc rối phải không nào? Vậy có cách nào giải quyết vấn đề này không? Câu trả lời là có bằng cách sử dụng một mẹo nhỏ như sau:

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

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

Hai dấu || có ý nghĩa rằng nếu vế trái không thực hiện được thì nó sẽ lấy vế phải và cứ như vậy cho tới khi lấy được thì dừng.

Demo RUN

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

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

document.write("Trình duyệt có chiều rộng là: " + width + "<br/>");
document.write("Trình duyệt có chiều cao là: " + height + "<br/>");

3. Thao tác đối tượng window trong javascript

Đối tượng window cung cấp một số phương thức giúp thao tác với trình duyệt dễ dàng hơn.

window.open() - mở một cửa sổ mới

Cú pháp: window.open(url, name, options)

Trong đó:

url : là đường dẫn website bạn muốn mở
name: là tên bạn đặt cho cửa sổ này
options: là một chuỗi các thông số được cách nhau bởi dấu phẩy, sau đây là các thông số thông dụng:
- height=pixels : chiều cao của cửa sổ
- width=pixels: chiều rộng của cửa sổ
- top=pixels: vị trí hiển thị cửa sổ so với lề trên
- left=pixels: vị trí hiển thị cửa sổ so với lề trái
- menubar=yes|no|1|0: có hiển thị thanh menu hay không?
- resizable=yes|no|1|0: có hiển thị biểu tượng resize cửa sổ hay không?
- scrollbars=yes|no|1|0: có hiển thị thanh cuộn hay không?
- status=yes|no|1|0: có hiển thị thanh trạng thái hay không?
- titlebar=yes|no|1|0: có hiển thị titlebar hay không?
- toolbar=yes|no|1|0: có hiển thị toolbar hay không?
- fullscreen=yes|no|1|0: có hiển thị biểu tượng fullscreen hay không?

Demo RUN

<html>
    <body>
      <script language="javascript">
        
        var windowChild = null;
        
        function openWindow()
        {
          windowChild = window.open('https://freetuts.net', "windowChild", "width=500, height=500");
        	return false;
        }
        
      </script>
      <a href="#" onclick="return openWindow()">Open</a>
    </body>
</html>
</script>

window.close() - đòng cửa sổ

Sau khi mở cửa sổ thì để đóng cửa sổ đó chúng ta sử dụng lệnh windowObj.close(), trong đó windowObj là cửa sổ mà ta sử dụng lệnh window.open() tạo ra.

Demo RUN

<html>
    <body>
      <script language="javascript">
        
        var windowChild = null;
        
        function openWindow()
        {
          	windowChild = window.open('https://freetuts.net', "windowChild", "width=500, height=500");
        	return false;
        }
        
        function closeWindow()
        {
          	windowChild.close()
        	return false;
        }
      </script>
      <a href="#" onclick="return openWindow()">Open</a>
      <a href="#" onclick="return closeWindow()">Close</a>
    </body>
</html>

window.moveTo() - di chuyển cửa sổ

Sau khi mở một cửa sổ nếu muốn di chuyển nó thì ta dùng lệnh windowObj.moveTo(top, left), trong đó:

top: là số pixels so với lề trên
left: là số pixels so với lề trái

Ví dụ:

<html>
    <body>
      <script language="javascript">
        
        var windowChild = null;
        
        function openWindow()
        {
          	windowChild = window.open('https://freetuts.net', "windowChild", "width=500, height=500");
        	return false;
        }
        
        function moveWindow()
        {
          	windowChild.moveTo(500, 100);
          	windowChild.focus();
        	return false;
        }
      </script>
      <a href="#" onclick="return openWindow()">Open</a>
      <a href="#" onclick="return moveWindow()">Move</a>
    </body>
</html>

window.resizeTo() - thay đổi kích thước cửa sổ

Lúc mở cửa sổ bạn sẽ thiết lập height và with cho window, tuy nhiên nếu sau khi mở bạn muốn thay đổi thì sử dụng hàm windowObj.resizeTo(width, height), trong đó:

width: chiều rộng của cửa sổ
height: chiều cao của cửa sổ

<html>
    <body>
      <script language="javascript">
        
        var windowChild = null;
        
        function openWindow()
        {
          	windowChild = window.open('https://freetuts.net', "windowChild", "width=500, height=500");
        	return false;
        }
        
        function resizeWindow()
        {
          	windowChild.resizeTo(1000, 1000);
          	windowChild.focus();
        	return false;
        }
      </script>
      <a href="#" onclick="return openWindow()">Open</a>
      <a href="#" onclick="return resizeWindow()">Resize</a>
    </body>
</html>

window.location.href - lấy url website

Nếu bạn muốn lấy đường dẫn hiện tại của trang web thì sử dụng lệnh sau.

let url = window.location.href;

4. Lời kết

Trong các ví dụ ở phần moveTo() và resizeTo() mình không có demo bởi vì trình duyệt đã chặn hai phương thức này, nên bạn hãy copy code vào file của bạn rồi chạy nhé.

Vẫn còn một số phương thức nữa nhưng bài này mình chỉ đề cập tới bấy nhiêu là quá đủ cho bạn học rồi, nếu cần thiết thì bạn có thể sử dụng google để tra cứu thêm. Và việc sử dụng đối tượng window để mở các cửa sổ không còn thông dụng nữa, mà thay vào đó người ta sử dụng một kỹ thuật khác đó là xây dựng popup, nhìn sẽ chuyên nghiệp và đẹp hơn.

Bài trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Cách dùng đối tượng window trong Javascript

1. Window trong javascript là gì?

2. Window.innerHeight - lấy kích thước trình duyệt

3. Thao tác đối tượng window trong javascript

window.open() - mở một cửa sổ mới

window.close() - đòng cửa sổ

window.moveTo() - di chuyển cửa sổ

window.resizeTo() - thay đổi kích thước cửa sổ

window.location.href - lấy url website

4. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng đối tượng window trong Javascript

1. Window trong javascript là gì?

2. Window.innerHeight - lấy kích thước trình duyệt

3. Thao tác đối tượng window trong javascript

window.open() - mở một cửa sổ mới

window.close() - đòng cửa sổ

window.moveTo() - di chuyển cửa sổ

window.resizeTo() - thay đổi kích thước cửa sổ

window.location.href - lấy url website

4. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript