Thuộc tính navigator trong window

Trong bài hướng dẫn tự học lập trình JavaScript này, bạn sẽ tìm hiểu về thuộc tính navigator trong window

1. Navigator là gì?

Thuộc tính navigator trong window (tức là window.navigator) là một tham chiếu đến một đối tượng Navigator.

Nó là thuộc tính chỉ đọc chứa thông tin về trình duyệt của người dùng.

Vì Window là một đối tượng toàn cục và nó nằm trên cùng của chuỗi phạm vi, nên các thuộc tính của đối tượng Window như window.navigator có thể được truy cập mà không cần đến tiền tố window.

Ví dụ window.navigator.language có thể được viết dưới dạng navigator.language.

Phần tiếp sau đây bạn sẽ được học cách sử dụng thuộc tính navigator để lấy các thông tin khác nhau về trình duyệt của người dùng.

2. Phát hiện xem trình duyệt đang online hay offline

Bạn có thể sử dụng thuộc tính navigator.onLine để phát hiện trình duyệt (hoặc, ứng dụng) đang online hay offline.

Thuộc tính này trả về giá trị true nghĩa là online hoặc false nghĩa là offline.

<script>
function kiemTraKetNoi() {
    if(navigator.onLine) {
        alert("Đang online.");
    } else {
        alert("Đang offline.");
    }
}
</script>
 
<button type="button" onclick="kiemTraKetNoi();">Kiểm tra kết nối</button>

Trình duyệt kích hoạt các sự kiện online và offline khi kết nối internet được thiết lập hoặc bị mất.

Dựa theo kết quả đó, bạn có thể thêm các chức năng xử lý vào các sự kiện này để tùy chỉnh trang web / ứng dụng của mình cho các tình huống online, offline phù hợp.

Hãy xem thêm một ví dụ:

<script>
    function goOnline() {
        // Hàm này sẽ thông báo khi trình duyệt đang online
        alert("Đang online");
    }

    function goOffline() {
        // Hàm này sẽ thông báo khi trình duyệt mất kết nối
        alert("Ố ồ, bạn đã bị mất mạng.");
    }

    if (navigator.onLine) {
        window.addEventListener("online", goOnline());
    } else {
        window.addEventListener("offline", goOffline());
    }
</script>

3. Kiểm tra xem cookie có được bật hay không?

Bạn có thể sử dụng navigator.cookieEnabled để kiểm tra xem cookie có được bật trong trình duyệt của người dùng hay không.

Thuộc tính này trả về giá trị true nếu cookie được bật hoặc false nếu không.

<script>
function kiemTraKetNoiCookie() {
    if(navigator.cookieEnabled) {
        alert("Cookies đang bật.");
    } else {
        alert("Cookies đang tắt.");
    }
}
</script>
 
<button type="button" onclick="kiemTraKetNoiCookie();">Kiểm tra kết nối Cookie</button>

Mẹo: Bạn nên sử dụng thuộc tính navigator.cookieEnabled để xác định xem cookie có được bật hay không trước khi tạo hoặc sử dụng cookie trong chương trình JavaScript của bạn.

4. Phát hiện ngôn ngữ của trình duyệt

Bạn có thể sử dụng thuộc tính navigator.language để phát hiện ngôn ngữ của trình duyệt mà người dùng đang sử dụng.

Thuộc tính này trả về một chuỗi đại diện cho ngôn ngữ, ví dụ: 'en', 'en-US', v.v.

<script>
function kiemTraNgonNgu() {
    alert("Trình duyệt bạn đang sử dụng ngôn ngữ: " + navigator.language);
}
</script>
 
<button type="button" onclick="kiemTraNgonNgu();">Kiểm tra ngôn ngữ</button>

5. Lấy thông tin về tên và phiên bản của trình duyệt

Đối tượng Navigator có năm thuộc tính chính cung cấp thông tin về tên và phiên bản về trình duyệt của người dùng.

Hãy thử một ví dụ dưới đây:

<script>
function layThongTinTrinhDuyet() {
	var thongTin = "\n App Name: " + navigator.appName;
	   thongTin += "\n App Version: " + navigator.appVersion;
	   thongTin += "\n App Code Name: " + navigator.appCodeName;
	   thongTin += "\n User Agent: " + navigator.userAgent;
	   thongTin += "\n Platform: " + navigator.platform;

    alert("Đây là thông tin trình duyệt của bạn: " + thongTin);
}
</script>
 
<button type="button" onclick="layThongTinTrinhDuyet();">Lấy thông tin trình duyệt</button>

Thử chạy nó trên trình duyệt của bạn xem thế nào nhé.

Mô tả các thuộc tính:

    + appName - Trả về tên của trình duyệt. Nó luôn trả về 'Netscape', trong bất kỳ trình duyệt nào.

    + appVersion - Trả về số phiên bản và thông tin khác về trình duyệt.

    + appCodeName - Trả về tên mã của trình duyệt. Nó trả về 'Mozilla', cho tất cả các trình duyệt.

    + userAgent - Thuộc tính này thường chứa tất cả thông tin trong cả appCodeName và appVersion.

    + platform - Trả về nền tảng mà trình duyệt đang chạy (ví dụ: 'Win32', 'WebTV OS', v.v.)

Như bạn có thể thấy khi chạy ví dụ, giá trị được trả về bởi các thuộc tính này bị sai lệch và không đáng tin cậy. Vì thế, bạn không nên sử dụng nó để lấy thông tin trình duyệt người dùng làm gì.

6. Kiểm tra trình duyệt có bật Java hay không

Bạn có thể sử dụng phương thức javaEnabled() để kiểm tra xem trình duyệt hiện tại có hỗ trợ Java hay không.

> Tham khảo: KHÓA HỌC JAVA WEB (Full Stack) nếu bạn yêu thích ngôn ngữ Java và muốn phát triển lâu dài với nó.

Phương thức này chỉ đơn giản cho biết tùy chọn điều khiển Java đang ON hay OFF.

<script>
function kiemTraJava() {
    if(navigator.javaEnabled()) {
        alert("Trình duyệt của bạn đang bật Java.");
    } else {
        alert("Trình duyệt của bạn chưa bật Java.");
    }
}
</script>
 
<button type="button" onclick="kiemTraJava();">Kiểm tra xem Java được bật hay chưa</button>

Nó không tiết lộ cho chúng ta biết liệu trình duyệt có cung cấp hỗ trợ Java hay Java có được cài đặt trên hệ thống của người dùng hay không.

> Và đừng quên, nếu muốn học lập trình web bài bản, thành nghề thì KHÓA HỌC LẬP TRÌNH FULL STACK này là một lựa chọn tốt nhất.