Javascript làm cách nào bạn có thể phát hiện tên trình duyệt của khách hàng

Thông thường, bạn có thể cần tùy chỉnh trang web hoặc ứng dụng web của mình tùy thuộc vào trình duyệt mà khách truy cập của bạn sử dụng. Bạn có thể thực hiện kiểu cá nhân hóa này bằng JavaScript. Ví dụ: tùy thuộc vào trình duyệt của khách hàng, bạn có thể muốn hiển thị thông báo hoặc nội dung khác nhau. Trong bài viết này, chúng ta sẽ tìm hiểu cách phát hiện trình duyệt trong JavaScript. Khi bạn có thể tìm ra trình duyệt web của khách hàng, bạn có thể tùy chỉnh trang web của mình theo yêu cầu của bạn


Cách phát hiện trình duyệt trong JavaScript

Có một số cách để tìm ra trình duyệt máy khách – sử dụng userAgent. trận đấu và userAgent. Chỉ số. hoa tiêu. userAgent chứa thông tin về trình duyệt web của khách hàng, dưới dạng một chuỗi. Tùy vào loại trình duyệt web mà giá trị của chuỗi này sẽ khác nhau. Ví dụ: nếu trình duyệt của khách hàng là Chrome thì trình điều hướng đó. userAgent có thể chứa chuỗi con chrome/chromium/crios


1. Sử dụng userAgent. cuộc thi đấu

Theo cách tiếp cận này, chúng tôi gọi hàm match[] JS để xác định trình duyệt máy khách

var userAgent = navigator.userAgent;
if[userAgent.match[/chrome|chromium|crios/i]]{
             browserName = "chrome";
   }

Trong đoạn mã trên, trước tiên chúng tôi lưu trữ giá trị userAgent trong một chuỗi. Sau đó, chúng tôi gọi hàm match[] trên đó để xác định xem nó có chứa bất kỳ giá trị nào thường được gán cho userAgent hay không, trong trường hợp trình duyệt là Chrome

Bạn có thể bọc điều kiện if ở trên trong một hàm như được hiển thị. Chúng tôi đã sử dụng các điều kiện if riêng biệt bên dưới để kiểm tra các loại trình duyệt khác nhau


function BrowserDetect[]{
                 
         var userAgent = navigator.userAgent;
         var browserName;
         
         if[userAgent.match[/chrome|chromium|crios/i]]{
             browserName = "chrome";
           }else if[userAgent.match[/firefox|fxios/i]]{
             browserName = "firefox";
           }  else if[userAgent.match[/safari/i]]{
             browserName = "safari";
           }else if[userAgent.match[/opr\//i]]{
             browserName = "opera";
           } else if[userAgent.match[/edg/i]]{
             browserName = "edge";
           }else{
             browserName="No browser detection";
           }
         
          alert['Your browser is '+ browserName];      
  }

Bạn có thể gọi chức năng này khi tải trang để hiển thị tên trình duyệt của khách hàng của bạn


2. Sử dụng userAgent. Chỉ số

Trong phương pháp này, chúng tôi sử dụng hàm indexOf để xác định loại trình duyệt web. Chúng tôi kiểm tra sự hiện diện của một số chuỗi con nhất định trong chuỗi userAgent, để tìm ra trình duyệt web. Nếu không có chuỗi mong muốn, hàm indexOf[] sẽ trả về -1

var browserName = [function [agent] {        switch [true] {
            case agent.indexOf["edge"] > -1: return "MS Edge";
            case agent.indexOf["edg/"] > -1: return "Edge [ chromium based]";
            case agent.indexOf["opr"] > -1 && !!window.opr: return "Opera";
            case agent.indexOf["chrome"] > -1 && !!window.chrome: return "Chrome";
            case agent.indexOf["trident"] > -1: return "MS IE";
            case agent.indexOf["firefox"] > -1: return "Mozilla Firefox";
            case agent.indexOf["safari"] > -1: return "Safari";
            default: return "other";
        }
    }][window.navigator.userAgent.toLowerCase[]];

Tất nhiên, bạn cũng có thể sử dụng câu lệnh if other để thực hiện các kiểm tra trên

Trong bài viết này, chúng ta đã học cách phát hiện trình duyệt web trong JavaScript. Nó rất hữu ích trong việc tùy chỉnh các trang web của bạn, theo trình duyệt được sử dụng. Về cơ bản, đó là việc kiểm tra tên trình duyệt trong chuỗi userAgent

Chủ tịch WebFX. Bill có hơn 25 năm kinh nghiệm trong ngành tiếp thị Internet chuyên về SEO, UX, kiến ​​trúc thông tin, tự động hóa tiếp thị, v.v. Nền tảng của William về máy tính khoa học và giáo dục từ Shippensburg và MIT đã cung cấp nền tảng cho MarketingCloudFX cũng như các dự án nghiên cứu và phát triển quan trọng khác tại WebFX

Nếu bạn thực sự phải làm điều đó, việc phát hiện trình duyệt nào ai đó đang sử dụng thật dễ dàng với JavaScript

JavaScript có một đối tượng tiêu chuẩn được gọi là

// Write it in the HTML document
document.write[navigator.userAgent]; 
0 chứa dữ liệu về trình duyệt đang được sử dụng

Đối tượng

// Write it in the HTML document
document.write[navigator.userAgent]; 
0 có rất nhiều thuộc tính, nhưng thuộc tính
// Write it in the HTML document
document.write[navigator.userAgent]; 
1 — một chuỗi chứa dữ liệu về trình duyệt, hệ điều hành, v.v.– là tất cả những gì chúng ta cần

Nếu chúng tôi muốn hiển thị giá trị của

// Write it in the HTML document
document.write[navigator.userAgent]; 
2, chúng tôi có thể thực hiện một trong các thao tác sau

Báo động

// Display in an alert box
alert[navigator.userAgent];

Giá trị của hoa tiêu. userAgent trong Firefox 30 trên Windows 7

Tài liệu. viết

// Write it in the HTML document
document.write[navigator.userAgent]; 

bảng điều khiển. nhật ký[]

// Display it in the browser's developer tool
// This is ideal
// Use console.log[] when you're developing/experimenting JavaScript
console.log[navigator.userAgent];

Nếu tôi đang sử dụng Internet Explorer 11 trên Windows 7, đầu ra sẽ là

________số 8

Như bạn có thể thấy, vấn đề với

// Write it in the HTML document
document.write[navigator.userAgent]; 
2 là nó là một chuỗi khổng lồ và nó cũng không thể đọc được bằng con người

Vì vậy, nếu tôi muốn làm việc với thông tin hoặc hiển thị thông tin đó cho người dùng, trước tiên tôi cần phân tích cú pháp chuỗi

Vấn đề là tôi cực kỳ kém cỏi và đáng xấu hổ về regex [trong số nhiều thứ khác], vì vậy tôi rất vui vì Phát hiện. thư viện JavaScript js của Darcy Clarke tồn tại

Phát hiện. js sẽ có thể phân tích giá trị chuỗi thành một đối tượng JavaScript mà con người có thể đọc được và có thể thao tác được

Để hiển thị tên trình duyệt, phiên bản trình duyệt và hệ điều hành trong bảng điều khiển của chúng tôi, đây là cách chúng tôi có thể thực hiện


function BrowserDetect[]{
                 
         var userAgent = navigator.userAgent;
         var browserName;
         
         if[userAgent.match[/chrome|chromium|crios/i]]{
             browserName = "chrome";
           }else if[userAgent.match[/firefox|fxios/i]]{
             browserName = "firefox";
           }  else if[userAgent.match[/safari/i]]{
             browserName = "safari";
           }else if[userAgent.match[/opr\//i]]{
             browserName = "opera";
           } else if[userAgent.match[/edg/i]]{
             browserName = "edge";
           }else{
             browserName="No browser detection";
           }
         
          alert['Your browser is '+ browserName];      
  }

0

Trong Firebug, đây là những gì tôi sẽ thấy


function BrowserDetect[]{
                 
         var userAgent = navigator.userAgent;
         var browserName;
         
         if[userAgent.match[/chrome|chromium|crios/i]]{
             browserName = "chrome";
           }else if[userAgent.match[/firefox|fxios/i]]{
             browserName = "firefox";
           }  else if[userAgent.match[/safari/i]]{
             browserName = "safari";
           }else if[userAgent.match[/opr\//i]]{
             browserName = "opera";
           } else if[userAgent.match[/edg/i]]{
             browserName = "edge";
           }else{
             browserName="No browser detection";
           }
         
          alert['Your browser is '+ browserName];      
  }

1

Và đây là những gì tôi sẽ thấy trong Chrome DevTools sử dụng cùng một máy


function BrowserDetect[]{
                 
         var userAgent = navigator.userAgent;
         var browserName;
         
         if[userAgent.match[/chrome|chromium|crios/i]]{
             browserName = "chrome";
           }else if[userAgent.match[/firefox|fxios/i]]{
             browserName = "firefox";
           }  else if[userAgent.match[/safari/i]]{
             browserName = "safari";
           }else if[userAgent.match[/opr\//i]]{
             browserName = "opera";
           } else if[userAgent.match[/edg/i]]{
             browserName = "edge";
           }else{
             browserName="No browser detection";
           }
         
          alert['Your browser is '+ browserName];      
  }

2

Để nhắm mục tiêu một trình duyệt cụ thể, bạn có thể sử dụng câu điều kiện

Chẳng hạn, nếu bạn chỉ muốn nhắm mục tiêu Safari trên máy tính để bàn, bạn có thể làm điều này


function BrowserDetect[]{
                 
         var userAgent = navigator.userAgent;
         var browserName;
         
         if[userAgent.match[/chrome|chromium|crios/i]]{
             browserName = "chrome";
           }else if[userAgent.match[/firefox|fxios/i]]{
             browserName = "firefox";
           }  else if[userAgent.match[/safari/i]]{
             browserName = "safari";
           }else if[userAgent.match[/opr\//i]]{
             browserName = "opera";
           } else if[userAgent.match[/edg/i]]{
             browserName = "edge";
           }else{
             browserName="No browser detection";
           }
         
          alert['Your browser is '+ browserName];      
  }

3

Đây là một bảng của tất cả các thuộc tính được phân tích cú pháp

Thuộc tínhMô tả
// Write it in the HTML document
document.write[navigator.userAgent]; 
4Tên trình duyệt
// Write it in the HTML document
document.write[navigator.userAgent]; 
5Tên trình duyệt và số phiên bản
// Write it in the HTML document
document.write[navigator.userAgent]; 
6Phiên bản đầy đủ của trình duyệt
// Write it in the HTML document
document.write[navigator.userAgent]; 
7Số phiên bản chính của trình duyệt
// Write it in the HTML document
document.write[navigator.userAgent]; 
8Số phiên bản chính của trình duyệt
// Write it in the HTML document
document.write[navigator.userAgent]; 
9Số bản vá của trình duyệt
// Display it in the browser's developer tool
// This is ideal
// Use console.log[] when you're developing/experimenting JavaScript
console.log[navigator.userAgent];
0Tên thiết bị
// Display it in the browser's developer tool
// This is ideal
// Use console.log[] when you're developing/experimenting JavaScript
console.log[navigator.userAgent];
1Tên và phiên bản thiết bị
// Display it in the browser's developer tool
// This is ideal
// Use console.log[] when you're developing/experimenting JavaScript
console.log[navigator.userAgent];
2Phiên bản đầy đủ của thiết bị
// Display it in the browser's developer tool
// This is ideal
// Use console.log[] when you're developing/experimenting JavaScript
console.log[navigator.userAgent];
3Số phiên bản chính của thiết bị
// Display it in the browser's developer tool
// This is ideal
// Use console.log[] when you're developing/experimenting JavaScript
console.log[navigator.userAgent];
3Số phiên bản phụ của thiết bị_______75Số loại thiết bị
// Display it in the browser's developer tool
// This is ideal
// Use console.log[] when you're developing/experimenting JavaScript
console.log[navigator.userAgent];
5Bản vá của thiết bị. g. “Máy tính để bàn” hoặc “Điện thoại di động”]_______77Nhà sản xuất thiết bị
// Display it in the browser's developer tool
// This is ideal
// Use console.log[] when you're developing/experimenting JavaScript
console.log[navigator.userAgent];
8Tên hệ điều hành
// Display it in the browser's developer tool
// This is ideal
// Use console.log[] when you're developing/experimenting JavaScript
console.log[navigator.userAgent];
9Tên hệ điều hành phiên bản đầy đủ
Mozilla/5.0 [Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; .NET4.0E; rv:11.0] like Gecko
0Phiên bản đầy đủ của hệ điều hành
Mozilla/5.0 [Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; .NET4.0E; rv:11.0] like Gecko
1Số phiên bản chính của hệ điều hành
Mozilla/5.0 [Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; .NET4.0E; rv:11.0] like Gecko
2Số phiên bản phụ của hệ điều hành
Mozilla/5.0 [Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; .NET4.0E; rv:11.0] like Gecko
3Số bản vá của hệ điều hành

Ghi chú. Nếu bất kỳ thuộc tính nào không thể được phân tích cú pháp, giá trị của thuộc tính đó sẽ là

Mozilla/5.0 [Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; .NET4.0E; rv:11.0] like Gecko
4 hoặc
Mozilla/5.0 [Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; .NET4.0E; rv:11.0] like Gecko
5. Nếu bạn định hiển thị thông tin cho người dùng của mình, bạn nên có sẵn các câu điều kiện cho
Mozilla/5.0 [Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; .NET4.0E; rv:11.0] like Gecko
4 và
Mozilla/5.0 [Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; .NET4.0E; rv:11.0] like Gecko
5

Tại sao bạn không nên sử dụng tính năng phát hiện trình duyệt JavaScript

Tôi không khuyên bạn nên sử dụng tính năng phát hiện trình duyệt JavaScript

Và bạn không bao giờ nên sử dụng các kỹ thuật mà tôi đã mô tả cho bất kỳ điều gì quan trọng đối với nhiệm vụ.

Tại sao?

Phát hiện trình duyệt JavaScript không đáng tin cậy

Người dùng có thể tắt JavaScript

Ngoài ra, có rất nhiều trình duyệt và phiên bản trình duyệt — và sẽ còn nhiều hơn nữa trong tương lai — điều này khiến cho việc phát hiện trình duyệt trở nên không thực tế và không thể bảo trì được như một phần của cơ sở mã luôn cập nhật

Phát hiện tính năng là một lựa chọn tốt hơn

Nếu bạn đang sử dụng tính năng phát hiện trình duyệt JavaScript với mục đích kiểm tra xem người dùng có khả năng trình duyệt nhất định hay không — chẳng hạn như API HTML5 mới chẳng hạn như WebRTC hoặc Canvas hoặc bất kỳ thứ gì — thì tốt hơn hết là bạn nên xác định theo thời gian thực xem khả năng đó có

Tôi sẽ sử dụng WebRTC để chứng minh quan điểm của mình

Theo caniuse. com, đây là trạng thái hỗ trợ trình duyệt của WebRTC

Nguồn. chó săn. com

Trong bảng hỗ trợ trình duyệt ở trên, màu đỏ là không tương thích và màu xanh lá cây là tương thích

Nếu chúng tôi sử dụng tính năng phát hiện trình duyệt để xác định xem máy khách có thể sử dụng WebRTC hay không, nó sẽ yêu cầu rất nhiều câu lệnh có điều kiện. Và mỗi khi phiên bản trình duyệt mới được tung ra, chúng tôi phải cập nhật mã của mình

Ngoài ra, chúng tôi chỉ nói về mười ba trình duyệt được liệt kê trong bảng hỗ trợ;

Và tôi nên lưu ý rằng việc sử dụng một số loại bảng tham chiếu hỗ trợ trình duyệt cũng không đáng tin cậy. Nó được cập nhật và duy trì bởi những người giống như bạn và tôi [mặc dù một số được tự động hóa bằng tập lệnh phát hiện tính năng]

Và cũng giống như bạn và tôi, cuộc sống đôi khi cản trở việc duy trì công việc của chúng ta

Thay vào đó, bạn nên kiểm tra theo thời gian thực xem tính năng chúng tôi muốn sử dụng có sẵn trong trình duyệt của khách hàng hay không. Kỹ thuật này được gọi là phát hiện tính năng

Làm cách nào chúng tôi có thể phát hiện xem tính năng WebRTC có sẵn trong trình duyệt hay không?

Chà, chúng tôi biết rằng một trình duyệt hỗ trợ WebRTC phải có chức năng

Mozilla/5.0 [Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; .NET4.0E; rv:11.0] like Gecko
8, vì vậy chúng tôi có thể kiểm tra xem liệu chúng tôi có thể gọi nó không

Mã bên dưới kiểm tra khả năng WebRTC của máy khách và bật ra hộp cảnh báo nếu tính năng này khả dụng. Điều này được mượn và điều chỉnh từ MDN

// Write it in the HTML document
document.write[navigator.userAgent]; 
9

Sử dụng thư viện JavaScript Modernizr để phát hiện tính năng trình duyệt phức tạp hơn

Lý do duy nhất tôi có thể nghĩ đến để phát hiện trình duyệt JavaScript là cải tiến lũy tiến không cần thiết

Ví dụ: nếu tôi muốn thêm một chút vào trải nghiệm của những người sử dụng một trình duyệt cụ thể, thì tính năng phát hiện trình duyệt JavaScript là một giải pháp rất nhanh [và rất bẩn]

Nội dung liên quan

  • Hình ảnh nền đầy đủ đáp ứng bằng CSS
  • 7 mẹo điên rồ sẽ giúp bạn trở thành một lập trình viên giỏi hơn
  • 5 thói quen tốt sẽ giúp bạn trở thành một lập trình viên giỏi hơn

Trang web của bạn SEO như thế nào?

Sử dụng công cụ miễn phí của chúng tôi để tính điểm của bạn trong vòng chưa đầy 60 giây

Nhận điểm SEO của bạn

Tài nguyên liên quan

  • Bạn cũng có thể thích
  • Dịch vụ của chúng tôi
  • Tài nguyên theo ngành

  • 16 giải pháp JavaScript miễn phí để hiển thị hình ảnh của bạn
  • Tạo Chú giải công cụ JavaScript đẹp, nhẹ
  • 6 khái niệm JavaScript nâng cao bạn nên biết
  • Làm việc với JavaScript Dates Sử dụng Moment. js
  • Mẫu Var đơn trong JavaScript
  • Lộ trình học JavaScript miễn phí
  • Hướng dẫn JavaScript tương tác
  • 10 cuốn sách JavaScript miễn phí

  • Dịch vụ thiết kế website
  • Cơ quan thiết kế web
  • Giá thiết kế web
  • Một trang web nên có giá bao nhiêu vào năm 2022?
  • Dịch vụ thiết kế blog từng đoạt giải thưởng. Nâng cấp Blog của bạn
  • Xây dựng trang web của bạn với một công ty thiết kế web tùy chỉnh đáng tin cậy
  • Dịch vụ phát triển trang web thương mại điện tử
  • Đại lý thiết kế web B2B
  • Thiết kế web dựa trên cơ sở dữ liệu

  • Thiết kế web cho công ty khai quật. 5 mẹo hàng đầu [Có ví dụ. ]
  • 5 mẹo thiết kế web cho người cài đặt hàng rào
  • 5 mẹo thiết kế web đơn giản và thành công cho các nhà bán lẻ phụ tùng ô tô
  • Lời khuyên cho thiết kế trang web y tế
  • Thiết kế trang web y tế từ một cơ quan giành giải thưởng
  • Top 10 mẹo thiết kế web hiệu quả cho trung tâm dịch vụ ô tô
  • Thiết Kế Web Năng Lượng Tái Tạo. Mẹo cho một trang web tỏa sáng
  • Dịch Vụ Thiết Kế Website Bảo Hiểm
  • 5 mẹo thiết kế web cho các phòng khám hiếm muộn

Trang web của bạn SEO như thế nào?

Sử dụng công cụ miễn phí của chúng tôi để tính điểm của bạn trong vòng chưa đầy 60 giây

Nhận điểm SEO của bạn

Tuyển dụng WebFX

Tham gia sứ mệnh của chúng tôi để cung cấp các dịch vụ tiếp thị kỹ thuật số hàng đầu trong ngành cho các doanh nghiệp trên toàn cầu - đồng thời xây dựng kiến ​​thức cá nhân của bạn và phát triển với tư cách cá nhân

Làm cách nào bạn có thể phát hiện trình duyệt của khách hàng?

Để phát hiện thông tin trình duyệt của người dùng, chúng tôi sử dụng trình điều hướng. thuộc tính userAgent . Và sau đó chúng tôi khớp với tên trình duyệt để xác định trình duyệt người dùng. Bây giờ hãy gọi hàm JS này khi tải trang và hàm này sẽ hiển thị tên trình duyệt của người dùng khi tải trang.

Tôi có thể phát hiện trình duyệt bằng JavaScript không?

Phát hiện trình duyệt bằng JavaScript. Nếu bạn thực sự phải làm điều đó, việc phát hiện trình duyệt mà ai đó đang sử dụng thật dễ dàng với JavaScript . JavaScript có một đối tượng tiêu chuẩn được gọi là bộ điều hướng chứa dữ liệu về trình duyệt đang được sử dụng.

Bạn sẽ phát hiện máy chủ bằng JavaScript như thế nào?

Để phát hiện hệ điều hành trên máy khách, người ta chỉ cần sử dụng trình điều hướng. appVersion hoặc trình điều hướng. thuộc tính userAgent . Thuộc tính Navigator appVersion là thuộc tính chỉ đọc và nó trả về một chuỗi đại diện cho thông tin phiên bản của trình duyệt.

Chủ Đề