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 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à // 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];
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
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 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 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
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
- 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ạnTà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ạnTuyể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