Tìm hiểu Browser Object Model - BOM trong JavaScript

Khi xây dựng các ứng dụng web bằng JavaScript, chúng ta không chỉ làm việc với nội dung của trang web thông qua HTML DOM, mà còn cần tương tác với chính trình duyệt web – nơi JavaScript được thực thi. Đây là lúc Browser Object Model (BOM) phát huy vai trò quan trọng.

BOM là một phần mở rộng của môi trường JavaScript trong trình duyệt, cho phép lập trình viên thao tác với các yếu tố bên ngoài của tài liệu HTML như cửa sổ trình duyệt, thanh địa chỉ, lịch sử truy cập, thông tin trình duyệt, và hơn thế nữa. Nhờ BOM, JavaScript có thể điều hướng đến một trang khác, hiển thị cảnh báo, mở cửa sổ mới, kiểm tra thông tin thiết bị của người dùng hoặc thao tác với thời gian một cách linh hoạt.

Trong bài viết này, mình sẽ cùng tìm hiểu chi tiết về Browser Object Model, các thành phần chính như window, location, history, navigator, screen, cũng như các ứng dụng thực tế và lưu ý quan trọng khi sử dụng BOM trong quá trình phát triển ứng dụng web.

Khái niệm BOM là gì?

Định nghĩa Browser Object Model (BOM)

BOM (Browser Object Model) là một phần của môi trường thực thi JavaScript trong trình duyệt web, cho phép lập trình viên tương tác với chính trình duyệt, ngoài phạm vi nội dung HTML.
Không giống như DOM (Document Object Model) – nơi JavaScript truy cập và thay đổi cấu trúc tài liệu HTML – BOM hỗ trợ JavaScript làm việc với các thành phần như:

• Cửa sổ trình duyệt (window)

• Thanh địa chỉ (URL) (location)

• Lịch sử truy cập (history)

• Thông tin trình duyệt và thiết bị (navigator)

• Thông tin màn hình (screen)

• Thời gian thực thi (setTimeout, setInterval)

• Cửa sổ popup hoặc cảnh báo (alert, prompt, confirm)

BOM không được quy chuẩn như DOM (W3C không định nghĩa chính thức về BOM), nên có thể có một vài khác biệt nhỏ giữa các trình duyệt.

BOM so với DOM – Giống và Khác nhau

Vì sao BOM quan trọng trong JavaScript?

BOM đóng vai trò rất quan trọng trong việc:

• Điều hướng trang web: Chuyển hướng hoặc tải lại trang bằng location.href, location.reload().

• Tương tác người dùng: Hiển thị thông báo (alert()), xác nhận (confirm()), lấy dữ liệu người dùng (prompt()).

• Kiểm soát thời gian: Dùng setTimeout() và setInterval() để thực hiện hành động theo thời gian.

• Truy cập thông tin hệ thống: Biết được trình duyệt, ngôn ngữ, hệ điều hành của người dùng (navigator).

• Quản lý lịch sử: Cho phép điều hướng tới trang trước/sau trong phiên duyệt web bằng history.back(), history.forward().

Các thành phần chính của BOM trong JavaScript

BOM (Browser Object Model) cung cấp nhiều đối tượng giúp chúng ta có thể tương tác với trình duyệt, cửa sổ, và các thông tin liên quan đến trình duyệt. Dưới đây là các thành phần chính trong BOM:

Đối tượng window

window là đối tượng gốc trong BOM, đại diện cho cửa sổ trình duyệt. Đây là đối tượng bao trùm, có thể truy cập và thao tác với tất cả các thành phần khác trong BOM. Khi làm việc với JavaScript trong trình duyệt, bạn thường làm việc trực tiếp với đối tượng window.

Các thuộc tính và phương thức phổ biến của window:

• window.alert(): Hiển thị hộp thoại cảnh báo với thông báo tùy ý.

window.alert("Đây là cảnh báo!");

window.setTimeout(): Thực hiện một hành động sau một khoảng thời gian nhất định (chỉ thực hiện một lần).

window.setTimeout(function() {
  alert("Đã hết thời gian!");
}, 2000); // Sau 2 giây

window.setInterval(): Thực hiện một hành động lặp lại sau một khoảng thời gian xác định.

window.setInterval(function() {
  console.log("Hành động này lặp lại mỗi 1 giây.");
}, 1000);

window.open(): Mở một cửa sổ mới trong trình duyệt.

window.open("https://www.google.com", "_blank");

window.close(): Đóng cửa sổ hiện tại (chỉ hoạt động với cửa sổ được mở bởi window.open()).

window.close();

Đối tượng navigator

navigator cung cấp thông tin về trình duyệt, hệ điều hành, và trạng thái kết nối của người dùng. Đây là đối tượng rất hữu ích để xác định môi trường của người dùng khi phát triển ứng dụng web.

Các thuộc tính thường dùng của navigator:

navigator.userAgent: Trả về chuỗi chứa thông tin về trình duyệt và hệ điều hành.

console.log(navigator.userAgent);
// Ví dụ: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"

navigator.language: Trả về ngôn ngữ mặc định của trình duyệt.

console.log(navigator.language); 
// Ví dụ: "en-US"

navigator.platform: Trả về nền tảng hệ điều hành mà trình duyệt đang chạy (ví dụ: Windows, MacOS, Linux).

console.log(navigator.platform); 
// Ví dụ: "Win32"

navigator.onLine: Trả về true nếu thiết bị của người dùng đang kết nối Internet, false nếu không.

console.log(navigator.onLine); // true hoặc false

Đối tượng screen

screen cung cấp thông tin về màn hình của người dùng, chẳng hạn như kích thước của màn hình, độ phân giải, và các đặc điểm khác.

Các thuộc tính của screen:

screen.width: Lấy chiều rộng của màn hình tính bằng pixel.

console.log(screen.width); // Ví dụ: 1920

screen.height: Lấy chiều cao của màn hình tính bằng pixel.

console.log(screen.height); // Ví dụ: 1080

screen.availWidth: Lấy chiều rộng có sẵn của màn hình (không tính các thanh tác vụ hoặc thanh menu).

console.log(screen.availWidth); // Ví dụ: 1920

screen.availHeight: Lấy chiều cao có sẵn của màn hình (không tính thanh tác vụ).

console.log(screen.availHeight); // Ví dụ: 1040

Đối tượng location

location cung cấp thông tin về URL hiện tại của trang web và cho phép bạn thay đổi hoặc điều hướng đến các URL khác.

Các phương thức và thuộc tính của location:

location.href: Trả về URL của trang hiện tại. Có thể thay đổi URL của trang để điều hướng đến trang mới.

console.log(location.href); // Lấy URL hiện tại
location.href = "https://www.google.com"; // Chuyển hướng đến Google

location.hostname: Trả về tên miền của trang web.

console.log(location.hostname); // Ví dụ: "www.example.com"

location.reload(): Làm mới lại trang hiện tại.

location.reload(); // Làm mới trang

location.assign(): Điều hướng đến một URL mới.

location.assign("https://www.example.com");

Đối tượng history

history quản lý lịch sử duyệt web của người dùng trong trình duyệt, cho phép bạn di chuyển qua các trang đã truy cập trước đó.

Các phương thức của history:

history.back(): Quay lại trang trước đó trong lịch sử duyệt web.

history.back(); // Quay lại trang trước

history.forward(): Tiến về phía trước trong lịch sử duyệt web.

history.forward(); // Tiến về trang sau

history.go(): Di chuyển đến một trang cụ thể trong lịch sử.

history.go(-2); // Quay lại 2 trang trước đó

Các phương thức tiện ích của BOM trong JavaScript

BOM (Browser Object Model) cung cấp nhiều phương thức hữu ích giúp tương tác với người dùng, điều khiển cửa sổ trình duyệt, và thực hiện các thao tác thời gian. Dưới đây là các phương thức tiện ích của BOM:

alert(), confirm(), prompt() – Hộp thoại tương tác

Các phương thức này cho phép bạn hiển thị hộp thoại để tương tác với người dùng, giúp thu thập thông tin hoặc hiển thị thông báo.

alert(): Hiển thị một hộp thoại đơn giản với thông báo và nút "OK". Thường dùng để cảnh báo người dùng.

alert("Chào bạn, đây là một thông báo!");

confirm(): Hiển thị một hộp thoại với thông báo và hai nút: "OK" và "Cancel". Trả về true nếu người dùng nhấn "OK" và false nếu nhấn "Cancel".

var result = confirm("Bạn có muốn tiếp tục?");
if (result) {
  alert("Bạn đã chọn OK");
} else {
  alert("Bạn đã chọn Cancel");
}

prompt(): Hiển thị hộp thoại yêu cầu người dùng nhập dữ liệu. Trả về giá trị nhập vào, hoặc null nếu người dùng hủy bỏ.

var name = prompt("Nhập tên của bạn:");
if (name) {
  alert("Xin chào, " + name);
}

setTimeout(), setInterval() – Tạo độ trễ, lặp thời gian

Các phương thức này cho phép bạn thực hiện một hành động sau một khoảng thời gian, hoặc lặp lại hành động sau một khoảng thời gian cố định.

setTimeout(): Thiết lập một hành động chỉ được thực hiện sau một khoảng thời gian nhất định (một lần duy nhất).

setTimeout(function() {
  alert("2 giây đã trôi qua!");
}, 2000); // Chạy sau 2 giây

setInterval(): Thiết lập một hành động được thực hiện liên tục sau mỗi khoảng thời gian cố định.

var intervalId = setInterval(function() {
  console.log("Hành động này lặp lại mỗi 2 giây.");
}, 2000);

// Để dừng lại sau 10 giây:
setTimeout(function() {
  clearInterval(intervalId);
}, 10000); // Dừng sau 10 giây

var newWindow = window.open("https://www.example.com", "_blank");

newWindow.close(); // Đóng cửa sổ đã mở

console.log(navigator.userAgent);

console.log(navigator.platform);

console.log(navigator.language);

location.href = "https://www.newpage.com"; // Điều hướng đến một trang mới

location.reload(); // Làm mới trang hiện tại

var newWindow = window.open("https://www.example.com", "_blank");

newWindow.close(); // Đóng cửa sổ đã mở

window.addEventListener("beforeunload", function(event) {
  var confirmationMessage = "Bạn có chắc chắn muốn rời khỏi trang?";
  event.returnValue = confirmationMessage; // Cảnh báo người dùng
  return confirmationMessage; // Phần này có thể không hiển thị trên một số trình duyệt
});

setInterval(function() {
  document.getElementById("content").innerHTML = "Nội dung mới được tải lại!";
}, 5000); // Cập nhật nội dung mỗi 5 giây

window.location.href = "https://www.example.com"; // Điều hướng đến trang mới

location.reload(); // Làm mới trang hiện tại

console.log(navigator.userAgent); // In ra chuỗi thông tin về trình duyệt

history.back(); // Quay lại trang trước