Hướng dẫn này sẽ hướng dẫn các cách khác nhau để phát hiện trình duyệt sử dụng Javascript. Ví dụ và tải xuống mã nguồn miễn phí bao gồm.

Bạn đang xem : làm cách nào bạn có thể phát hiện tên trình duyệt của ứng dụng khách trong javascript

Chào mừng bạn đến với hướng dẫn về cách phát hiện trình duyệt bằng Javascript. Có một số tập lệnh mà bạn chỉ muốn chạy trên một trình duyệt nhất định? Có thể hạn chế một số tính năng, thực hiện một số kiểm tra tính tương thích?

Các phương pháp phổ biến được sử dụng để phát hiện trình duyệt trong Javascript là:

  1. Trích xuất thông tin từ tác nhân người dùng, kiểm tra xem nó có chứa tên của trình duyệt hay không. Ví dụ: để kiểm tra trình duyệt Chrome – if (Navigator.userAgent.indexOf ("Chrome")! = -1)
  2. Sử dụng thư viện phát hiện, chẳng hạn như Bowser .
  3. Phát hiện tiền tố nhà cung cấp CSS – Kiểm tra xem trình duyệt có hỗ trợ WebKit , Moz hay MS hay không.
  4. Nhập vịt của trình duyệt – Kiểm tra các tính năng độc đáo mà mỗi trình duyệt có.

Đúng vậy, thực tế không có cách cố định nào đáng tin cậy để phát hiện một trình duyệt. Vậy mỗi phương pháp hoạt động như thế nào, và phương pháp nào là tốt nhất? Đọc để tìm hiểu!

ⓘ Tôi đã bao gồm một tệp zip với tất cả mã nguồn mẫu ở đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào.

TRANG TRÌNH BÀY NHANH

MỤC LỤC

TẢI XUỐNG & amp; LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa.

LƯU Ý NHANH

Nếu bạn phát hiện ra lỗi, vui lòng bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem

Nếu bạn phát hiện lỗi, vui lòng nhận xét bên dưới. Tôi cũng cố gắng trả lời những câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời khẩn cấp, vui lòng xem danh sách các trang web của tôi để nhận trợ giúp về lập trình

TẢI XUỐNG MÃ VÍ DỤ

Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành mã nguồn theo giấy phép của MIT, vì vậy hãy thoải mái xây dựng hoặc sử dụng nó trong dự án của riêng bạn.

PHÁT HIỆN TRÌNH DUYỆT

Được rồi, bây giờ chúng ta hãy bắt đầu với các cách phát hiện trình duyệt trong Javascript.

PHƯƠNG PHÁP 1) ĐỌC THÔNG TIN NGƯỜI DÙNG

1-user-agent.html

  window.addEventListener ("tải", () = & gt; {
  // TRÌNH DUYỆT CHROME
  if (Navigator.userAgent.indexOf ("Chrome")! = -1) {
    console.log ("Google Chrome");
  }
  // FIREFOX
  else if (Navigator.userAgent.indexOf ("Firefox")! = -1) {
    console.log ("Mozilla Firefox");
  }
  // TRÌNH DUYỆT WEB IE
  else if (Navigator.userAgent.indexOf ("MSIE")! = -1) {
    console.log ("Internet Exploder");
  }
  // BỜ RÌA
  else if (Navigator.userAgent.indexOf ("Edge")! = -1) {
    console.log ("Internet Exploder");
  }
  // CUỘC ĐI SĂN
  else if (Navigator.userAgent.indexOf ("Safari")! = -1) {
    console.log ("Safari");
  }
  // OPERA
  else if (Navigator.userAgent.indexOf ("Opera")! = -1) {
    console.log ("Opera");
  }
  // TRÌNH DUYỆT YANDEX
  else if (Navigator.userAgent.indexOf ("YaBrowser")! = -1) {
    console.log ("YaBrowser");
  }
  // KHÁC
  khác {
    console.log ("Khác");
  }
});  

Tác nhân người dùng là một phần thông tin mà trình duyệt gửi đến máy chủ. Nếu bạn đang tự hỏi nó trông như thế nào, đây là một ví dụ từ Google Chrome:

Xem Thêm  How to wrap text in Excel automatically and manually

  Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML, như Gecko) Chrome / 96.0.4664.110 Safari / 537.36  

Vì vậy, có, nó chứa thông tin chung như trình duyệt, hệ điều hành và các công nghệ phần mềm khác. Chúng tôi có thể sử dụng điều này để phát hiện trình duyệt và nó đơn giản như kiểm tra xem tên trình duyệt có bị kẹt ở đâu đó bên trong khối văn bản hay không. Nhưng hãy lưu ý – Người dùng có thể chọn ẩn tác nhân người dùng và nó không phải là một phương pháp hoàn toàn đáng tin cậy.

PHƯƠNG PHÁP 2) SỬ DỤNG THƯ VIỆN PHÁT HIỆN

2-bowser.html

  & lt;! - (A) TẢI BOWSER - & gt;
& lt; script src = "https://cdn.jsdelivr.net/npm/bowser@2.11.0/es5.min.js" & gt; & lt; / script & gt;
& lt; script & gt;
// (B) PHÁT HIỆN TRÌNH DUYỆT
// https://github.com/lancedikson/bowser
// https://www.jsdelivr.com/package/npm/bowser
window.addEventListener ("tải", () = & gt; {
  // (B1) ĐẠI LÝ NGƯỜI DÙNG PARSE
  var result = bowser.getParser (Navigator.userAgent) .getResult ();
 
  // (B2) THÔNG TIN TRÌNH DUYỆT
  console.log (result.browser.name);
  console.log (result.browser.version);
  console.log (result.engine);
 
  // (B3) HỆ THỐNG VẬN HÀNH
  console.log (result.os.name);
  console.log (result.os.version);
  console.log (result.os.versionName);
 
  // (B4) NỀN TẢNG
  console.log (result.platform.type);
});
& lt; / script & gt;  

Có rất nhiều thư viện phát hiện, nhưng thư viện chúng tôi đang sử dụng này được gọi là Bowser . Như bạn có thể thấy, điều này thực sự dựa vào tác nhân người dùng một lần nữa. Nó chỉ đơn giản là phân tích thông tin để làm cho mọi thứ thuận tiện hơn, nhưng nó có cùng một vấn đề cũ – Không hoàn toàn đáng tin cậy.

PHƯƠNG PHÁP 3) PHÁT HIỆN CSS PREFIX

Ghi công cho David Walsh cho đoạn mã này về cách phát hiện tiền tố nhà cung cấp :

3-provider.html

  window.addEventListener ("tải", () = & gt; {
  var prefix = (Array.prototype.slice
  .call (window.getComputedStyle (document.documentElement, ""))
  .tham gia("")
  .match (/ - (moz | webkit | ms) - /)) [1];

  // MOZ - FIREFOX (GECKO ENGINE)
  // WEBKIT - CHROME, SAFARI, OPERA, EDGE (WEBKIT ENGINE)
  // MS - BỘ GIẢI THÍCH INTERNET CŨ & amp; EDGE (ĐỘNG CƠ TRIDENT)
  // LƯU Ý - CÁC PHIÊN BẢN OPERA CŨ SỬ DỤNG ĐỘNG CƠ PRESTO. PREFIX IS -O
  console.log (tiền tố);
});  

Đối với những bạn chưa biết, mỗi trình duyệt có bộ công nghệ thử nghiệm độc đáo của riêng mình. Để sử dụng thuộc tính CSS thử nghiệm và không chuẩn, chúng tôi phải đính kèm tiền tố vào thuộc tính tương ứng:

  • WebKit – Dành cho Chrome, Safari, Opera và Edge.
  • Moz – Mozilla Firefox.
  • MS – Microsoft Internet Explorer và Edge cũ.
  • O – Phiên bản Opera cũ hơn.

Vì vậy, có, chúng tôi có thể phát hiện trình duyệt sử dụng tiền tố nào và xác định trình duyệt chạy trên công cụ nào. Mặc dù điều này đáng tin cậy hơn theo nghĩa là người dùng không thể tắt nó – Nhưng chúng tôi cũng có thể biết chính xác trình duyệt nào.

Tái bút: Vào tháng 1 năm 2020, Edge đã trở thành dựa trên Chromium. Các phiên bản cũ hơn giữ lại MS nhưng các phiên bản sau là WebKit .

PHƯƠNG PHÁP 4) KIỂU VỊT

Tín dụng cho bài đăng này trên StackOverflow .

4-duck.html

  window.addEventListener ("tải", () = & gt; {
  // OPERA 8.0+
  var isOpera = (!! window.opr & amp; & amp; !! opr.addons) || !! window.opera || Navigator.userAgent.indexOf ('OPR /') & gt; = 0;

  // FIREFOX 1.0+
  var isFirefox = typeof InstallTrigger! == 'undefined';

  // SAFARI 3.0+
  var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) {return p.toString () === "[object SafariRemoteNotification]";}) (! window ['safari'] || (typeof safari! == 'undefined' & amp; & amp; safari.pushNotification ));

  // INTERNET EXPLORER 6-11
  var isIE = / * @ cc_on! @ * / false || !! document.documentMode;

  // EDGE 20+
  var isEdge =! isIE & amp; & amp; !! window.StyleMedia;

  // CHROME 1+
  var isChrome = !! window.chrome;

  // PHÁT HIỆN ĐỘNG CƠ BLINK
  var isBlink = (isChrome || isOpera) & amp; & amp; !! window.CSS;

  console.log ("Opera -" + isOpera);
  console.log ("Firefox -" + isFirefox);
  console.log ("Safari -" + isSafari);
  console.log ("IE -" + isIE);
  console.log ("Cạnh -" + isEdge);
  console.log ("Chrome -" + isChrome);
  console.log ("Nháy mắt -" + isBlink);
});  

Tính năng gõ vịt chỉ đơn giản là phát hiện các “điểm kỳ quặc” và “các tính năng độc đáo” của mỗi trình duyệt. Ví dụ: window.opr window.opera là duy nhất cho Opera và window.chrome là duy nhất cho Chrome. Mặc dù đây có lẽ là một trong những phương pháp đáng tin cậy nhất, nhưng phải mất rất nhiều thời gian để tìm ra điểm nào là duy nhất cho mỗi trình duyệt – Một điều thực sự khó khăn khi phải cập nhật danh sách này.

Xem Thêm  MySQL Drop Khoá ngoại - cách xóa khóa ngoại

NHỮNG LỢI ÍCH HỮU ÍCH & amp; LIÊN KẾT

Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn.

ĐẠI LÝ NGƯỜI DÙNG KHÔNG CHÍNH XÁC!

Xin lưu ý rằng tác nhân người dùng có thể dễ dàng được tinh chỉnh bằng các công cụ phát triển và plugin. Vâng, nó không chính xác 100%, người dùng có thể ẩn nó vì mục đích bảo mật hoặc thậm chí thay đổi nó thành một thứ khác để thử nghiệm.

NÀO LÀ TỐT NHẤT? PHÁT HIỆN ĐẶC TRƯNG.

Cá nhân tôi sẽ nói rằng không có phương pháp phát hiện nào ở trên là đáng tin cậy. Nếu bạn đang cố gắng thực hiện khả năng tương thích ngược hoặc đa nền tảng, thì việc phát hiện trình duyệt sẽ không có ý nghĩa gì. Thay vào đó, hãy phát hiện tính năng. Cá nhân tôi sử dụng thư viện có tên Modernizr , và ví dụ: nếu chúng tôi cần kiểm tra vị trí thực của người dùng qua GPS, chúng tôi sẽ kiểm tra sự hỗ trợ cho Vị trí địa lý API.

Tải xuống bản dựng Modernizr tùy chỉnh của bạn, sau đó chỉ cần đưa vào tập lệnh của bạn:

  & lt; script src = "modernizr-custom.js" & gt; & lt; / script & gt;
& lt; script & gt;
if (Modernizr.geolocation) {
  // TIẾP TỤC
} khác {
  // TẢI POLYFILL HOẶC CẢNH BÁO NGƯỜI DÙNG
}
& lt; / script & gt;  

Tôi hy vọng điều này có ý nghĩa hơn, chúng tôi chỉ kiểm tra xem tính năng bắt buộc có khả dụng hay không; Sẽ rất kém hiệu quả nếu cố gắng tìm ra trình duyệt nào, phiên bản nào có khả năng, trình duyệt nào không.

LIÊN KẾT & amp; TÀI LIỆU THAM KHẢO

HƯỚNG DẪN CỦA YOUTUBE

BẢNG CHEAT HÌNH ẢNH

HẾT

Cảm ơn bạn đã đọc và chúng ta đã đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn, và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề làm thế nào bạn có thể phát hiện tên trình duyệt của khách hàng trong javascript

Validate Form bằng JavaScript sử dụng Regex (Regular Expressions)

  • Tác giả: Trịnh Khắc Tùng
  • Ngày đăng: 2021-04-02
  • Đánh giá: 4 ⭐ ( 1047 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Video được record tại một buổi học lập trình Website lớp PHP0720E2 (ITPlus Academy), hy vọng sẽ giúp cho các bạn có được nền tảng cơ bản khi tiếp cận với lập trình Website.

    🔸 Mọi ý kiến đóng góp, mọi người có thể để lại comment dưới video. Xin cảm ơn!

    ————— ————— —————
    Link Info: https://bit.ly/2PQsG23 | https://tungtk.com/

    ■ Facebook: https://facebook.com/trinhkhactung.trinh
    ■ Instagram: https://www.instagram.com/tungtk0811
    ■ Gmail: khactung7@gmail.com

    Like & Subscribe để theo dõi tiếp kênh nhé ! ^^ Cảm ơn mọi người!!!

Web Server là gì? Tìm hiểu cơ chế vận hành của web server

  • Tác giả: bizflycloud.vn
  • Đánh giá: 4 ⭐ ( 4412 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Web server hay còn gọi là máy chủ web, trong đó được kết nối và liên kết mạng máy tính mở rộng

Tạo bài kiểm tra bằng Microsoft Forms

  • Tác giả: support.microsoft.com
  • Đánh giá: 4 ⭐ ( 4958 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Với tư cách là giảng viên, bạn có thể sử dụng Microsoft Forms để đánh giá nhanh tiến bộ của học viên và nhận phản hồi trong thời gian thực thông qua việc sử dụng các bài kiểm tra mà bạn thiết kế và chia sẻ với lớp học của mình.

7 ứng dụng bạn có thể xây dựng bằng JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 7947 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, mình sẽ liệt kê các loại ứng dụng quan trọng nhất mà các công ty ngày nay xây dựng bằng JavaScript để cho bạn thấy

Về JavaScript – Làm thế nào để kích hoạt JavaScript trong trình duyệt web của bạn

  • Tác giả: aboutjavascript.com
  • Đánh giá: 5 ⭐ ( 4969 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript, cho phép javascript, kích hoạt javascript, về javascript, trình duyệt, trình duyệt Internet Explorer, Firefox, Chrome, Safari, Opera, iphone, ipad, ipod

Bitdefender Vietnam

  • Tác giả: www.bitdefender.vn
  • Đánh giá: 5 ⭐ ( 3825 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Adware được hiểu là tất cả các phần mềm mà trong đó biểu ngữ quảng cáo được hiển thị cùng lúc khi chương trình đang chạy. Tác giả của các ứng dụng này đã bổ sung thêm các đoạn mã phân phát quảng cáo, có thể được xem qua các cửa sổ bật lên hoặc thông qua một thanh xuất hiện trên màn hình máy tính. Phần mềm quảng cáo tạo doanh thu rất lớn cho nhà phát triển bằng cách tự động tạo quảng cáo trực tuyến trong giao diện người dùng của phần mềm hoặc trên màn hình được hiển thị cho người dùng trong quá trình cài đặt.

Jmeter là gì? Tại sao lại sử dụng Jmeter? Những ưu điểm và nhược điểm của nó

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 1824 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hãy giả sử rằng công ty bạn vừa phát triển một trang web thương mại điện tử, cái mà tương tự như Amazon. Đó là dự án lớn nhất đối với tổ chức của bạn và một số lượng lớn khách hàng sẽ sử dụng trang we…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Làm việc với các giá trị SQL NULL - truy vấn sql để tìm các giá trị rỗng trong bảng

By ads_php