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 Show
Cách phát hiện trình duyệt trong JavaScriptCó 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 đấuTheo 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 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 WebFXNế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à Đố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); 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ố 8Như 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 0Trong Firebug, đây là những gì tôi sẽ thấy 1Và đây là những gì tôi sẽ thấy trong Chrome DevTools sử dụng cùng một máy 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 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 Gecko0Phiê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 Gecko1Số 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 Gecko2Số 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 Gecko3Số 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 Gecko4 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 Gecko5. 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 Gecko4 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 Gecko5 Tại sao bạn không nên sử dụng tính năng phát hiện trình duyệt JavaScriptTô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ậyNgườ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ơnNế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 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 Gecko8, 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
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ạnTài nguyên liên quan
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ạnTuyển dụng WebFXTham 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. |