5

Cách Nhận Diện Trình Duyệt Bằng JS

Tác giả: Hòa Trần Blogger - đăng vào tháng 2 02, 2025
Cách Nhận Diện Trình Duyệt Bằng JavaScript – Chrome, Safari, Firefox, Edge, Opera, IE

Khi phát triển website, đôi khi bạn cần chạy code riêng cho từng trình duyệt vì mỗi trình duyệt có thể xử lý HTML, CSS, JavaScript khác nhau. Trong bài viết này, mình sẽ hướng dẫn cách nhận diện trình duyệt bằng JavaScript một cách chính xác và tối ưu.

Cách Nhận Diện Trình Duyệt Bằng JS


1. Tại sao cần kiểm tra trình duyệt?

Một số trình duyệt không hỗ trợ các tính năng mới của JavaScript hoặc CSS.
Có thể cần áp dụng CSS riêng cho từng trình duyệt để tối ưu giao diện.
Tránh lỗi xảy ra trên các trình duyệt cũ như Internet Explorer (IE).
Giúp kiểm soát và tối ưu trải nghiệm người dùng trên từng nền tảng

2. Cách nhận diện trình duyệt bằng JavaScript

Chúng ta sử dụng navigator.userAgent để kiểm tra chuỗi User-Agent, từ đó xác định trình duyệt.

<script>
  var userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.includes("chrome") && !userAgent.includes("edg") && !userAgent.includes("opr")) {
    // Code dành riêng cho Chrome
  } else if (userAgent.includes("safari") && !userAgent.includes("chrome")) {
    // Code dành riêng cho Safari
  } else if (userAgent.includes("firefox")) {
    // Code dành riêng cho Firefox
  } else if (userAgent.includes("edg")) {
    // Code dành riêng cho Edge
  } else if (userAgent.includes("opr") || userAgent.includes("opera")) {
    // Code dành riêng cho Opera
  } else if (userAgent.includes("msie") || userAgent.includes("trident")) {
    // Code dành riêng cho Internet Explorer
  } else {
    // Code dành cho trình duyệt khác hoặc không hỗ trợ
  }
</script>

3. Cách hoạt động của đoạn code trên

✅ Lấy thông tin trình duyệt bằng navigator.userAgent.toLowerCase().
✅ Tạo biến nhận diện từng trình duyệt bằng phương thức .includes().
✅ Sử dụng điều kiện if...else if để thực hiện code riêng cho từng trình duyệt.

4. Lưu ý khi sử dụng navigator.userAgent

❌ Không hoàn toàn chính xác vì userAgent có thể bị giả mạo.
✅ Nên kết hợp với Feature Detection (window.chrome, window.safari, window.opr).
⚡ Có thể kiểm tra nền tảng (Windows, macOS, iOS, Android) bằng navigator.platform.

Tổng kết

✅ navigator.userAgent giúp kiểm tra trình duyệt để chạy code phù hợp.
✅ Có thể nhận diện Chrome, Safari, Firefox, Edge, Opera, Internet Explorer (IE).
✅ Dễ áp dụng cho các dự án web để tối ưu trải nghiệm người dùng.

Bạn đã áp dụng cách nhận diện trình duyệt nào cho website của mình chưa? Hãy để lại bình luận bên dưới nhé!
Đừng bỏ lỡ.
Hổ trợ 24/7

Đừng ngừng ngại liên hệ chúng tôi, hổ trợ 24/7. Hotline: 097 1539 681

alt
alt