Cách kiểm tra xem JavaScript có đang chạy không

Khái niệm phát hiện đặc trưng

Ý tưởng đằng sau tính năng phát hiện tính năng là bạn có thể chạy thử nghiệm để xác định xem một tính năng có được hỗ trợ trong trình duyệt hiện tại hay không, sau đó chạy mã có điều kiện để cung cấp trải nghiệm chấp nhận được cả trong trình duyệt hỗ trợ tính năng này và trình duyệt không hỗ trợ. Nếu bạn không làm điều này, các trình duyệt không hỗ trợ các tính năng bạn đang sử dụng trong mã của bạn có thể không hiển thị đúng trang web của bạn hoặc có thể bị lỗi hoàn toàn, tạo ra trải nghiệm người dùng không tốt

Hãy tóm tắt lại và xem xét ví dụ mà chúng ta đã chạm vào trong phần Xử lý các sự cố JavaScript phổ biến — API vị trí địa lý [hiển thị dữ liệu vị trí có sẵn cho thiết bị mà trình duyệt web đang chạy trên đó] có điểm đầu vào chính để sử dụng nó, một thuộc tính

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

Để phát hiện một tính năng duy nhất, câu lệnh

Trước khi tiếp tục, chúng tôi muốn nói trước một điều — đừng nhầm lẫn tính năng phát hiện tính năng với trình duyệt đánh hơi [phát hiện trình duyệt cụ thể nào đang truy cập trang web] — đây là một thực tế tồi tệ nên được ngăn chặn bằng mọi giá. Xem Sử dụng mã đánh hơi trình duyệt xấu để biết thêm chi tiết

Viết bài kiểm tra phát hiện tính năng của riêng bạn

Trong phần này, chúng ta sẽ xem xét triển khai các thử nghiệm phát hiện tính năng của riêng bạn, bằng cả CSS và JavaScript

CSS

Bạn có thể viết bài kiểm tra các tính năng CSS bằng cách kiểm tra sự tồn tại của phần tử. Phong cách. tài sản [e. g.

Một ví dụ cổ điển có thể là kiểm tra hỗ trợ Subgrid trong trình duyệt; . Đối với các trình duyệt không có, chúng tôi có thể sử dụng lưới thông thường hoạt động tốt nhưng trông không bắt mắt bằng

Sử dụng điều này làm ví dụ, chúng tôi có thể bao gồm biểu định kiểu lưới con nếu giá trị được hỗ trợ và biểu định kiểu lưới thông thường nếu không. Để làm như vậy, chúng tôi có thể đưa hai biểu định kiểu vào phần đầu của tệp HTML của mình. một cho tất cả kiểu dáng và một triển khai bố cục mặc định nếu lưới con không được hỗ trợ

Ở đây,

const conditional = document.querySelector['.conditional'];
if [CSS.supports["grid-template-columns", "subgrid"]] {
  conditional.setAttribute['href', 'subgrid-layout.css.css'];
}

const conditional = document.querySelector['.conditional'];
if [CSS.supports["grid-template-columns", "subgrid"]] {
  conditional.setAttribute['href', 'subgrid-layout.css.css'];
}

const conditional = document.querySelector['.conditional'];
if [CSS.supports["grid-template-columns", "subgrid"]] {
  conditional.setAttribute['href', 'subgrid-layout.css.css'];
}

Chúng tôi sử dụng JavaScript để kiểm tra hỗ trợ cho giá trị lưới con, sau đó cập nhật

const conditional = document.querySelector['.conditional'];
if [CSS.supports["grid-template-columns", "subgrid"]] {
  conditional.setAttribute['href', 'subgrid-layout.css.css'];
}

Chúng tôi có thể thêm một

const conditional = document.querySelector['.conditional'];
if [CSS.supports["grid-template-columns", "subgrid"]] {
  conditional.setAttribute['href', 'subgrid-layout.css.css'];
}

const conditional = document.querySelector['.conditional'];
if [CSS.supports["grid-template-columns", "subgrid"]] {
  conditional.setAttribute['href', 'subgrid-layout.css.css'];
}

Trong tuyên bố có điều kiện của chúng tôi, chúng tôi kiểm tra xem liệu tài sản ____60 có hỗ trợ giá trị

const conditional = document.querySelector['.conditional'];
if [CSS.supports["grid-template-columns", "subgrid"]] {
  conditional.setAttribute['href', 'subgrid-layout.css.css'];
}

@supports

CSS có cơ chế phát hiện tính năng gốc. quy tắc

const conditional = document.querySelector['.conditional'];
if [CSS.supports["grid-template-columns", "subgrid"]] {
  conditional.setAttribute['href', 'subgrid-layout.css.css'];
}

Ví dụ: chúng ta có thể viết lại ví dụ trước để sử dụng

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

Khối theo quy tắc này chỉ áp dụng quy tắc CSS bên trong nếu trình duyệt hiện tại hỗ trợ khai báo

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

Điều này thuận tiện hơn ví dụ trước — chúng tôi có thể thực hiện tất cả tính năng phát hiện tính năng của mình trong CSS, không yêu cầu JavaScript và chúng tôi có thể xử lý tất cả logic trong một tệp CSS duy nhất, cắt giảm các yêu cầu HTTP. Vì lý do này, đây là phương pháp ưa thích để xác định trình duyệt hỗ trợ các tính năng CSS

JavaScript

Chúng ta đã thấy một ví dụ về thử nghiệm phát hiện tính năng JavaScript trước đó trên. Nói chung, các thử nghiệm như vậy được thực hiện thông qua một trong các mẫu phổ biến sau

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

Ghi chú.

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

Tuy nhiên, hãy nhớ rằng một số tính năng được biết là không thể phát hiện được — xem danh sách Không thể phát hiện của Modernizr từ năm 2016

matchMedia

Chúng tôi cũng muốn đề cập đến tính năng JavaScript của

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

Ví dụ: bản trình diễn Ảnh chụp nhanh của chúng tôi sử dụng nó để áp dụng có chọn lọc thư viện Brick JavaScript và sử dụng nó để xử lý bố cục giao diện người dùng, nhưng chỉ dành cho bố cục màn hình nhỏ [rộng 480px trở xuống]. Trước tiên, chúng tôi sử dụng thuộc tính

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

Sau đó, chúng tôi sử dụng

if ["geolocation" in navigator] {
  navigator.geolocation.getCurrentPosition[function[position] {
    // show the location on a map, such as the Google Maps API
  }];
} else {
  // Give the user a choice of static maps
}

Sử dụng Modernizr để triển khai tính năng phát hiện

Có thể thực hiện các thử nghiệm phát hiện tính năng của riêng bạn bằng cách sử dụng các kỹ thuật như các kỹ thuật chi tiết ở trên. Tuy nhiên, bạn cũng có thể sử dụng thư viện phát hiện tính năng chuyên dụng vì nó giúp mọi việc dễ dàng hơn nhiều. Thư viện mẹ của tất cả các thư viện phát hiện tính năng là Modernizr và nó có thể phát hiện mọi thứ bạn cần. Hãy xem cách sử dụng nó ngay bây giờ

Khi bạn đang thử nghiệm với Modernizr, bạn cũng có thể sử dụng bản dựng phát triển, bao gồm mọi thử nghiệm phát hiện tính năng có thể. Tải xuống ngay bây giờ bằng cách

1. Nhấp vào liên kết Bản dựng phát triển
2. Nhấp vào nút Build lớn màu hồng ở đầu trang
3. Nhấp vào liên kết Tải xuống trên cùng trong hộp thoại xuất hiện

Lưu nó ở đâu đó hợp lý, chẳng hạn như thư mục bạn đã sử dụng các hướng dẫn khác trong loạt bài này

Khi bạn đang sử dụng Modernizr trong sản xuất, bạn có thể truy cập trang Tải xuống mà bạn đã truy cập và nhấp vào nút dấu cộng để chỉ bao gồm các tính năng bạn cần để phát hiện tính năng. Sau đó, khi bạn nhấp vào nút Bản dựng, bạn sẽ tải xuống bản dựng tùy chỉnh chỉ chứa các tính năng phát hiện đó, giúp kích thước tệp nhỏ hơn nhiều

CSS

Chúng ta hãy xem cách Modernizr hoạt động về mặt áp dụng CSS có chọn lọc

1. Đầu tiên, tạo một bản sao của

   if ["geolocation" in navigator] {
     navigator.geolocation.getCurrentPosition[function[position] {
       // show the location on a map, such as the Google Maps API
     }];
   } else {
     // Give the user a choice of static maps
   }
   

   79 và
   70. Lưu chúng dưới dạng
   71 và
   72
2. Cập nhật phần tử
   73 trong HTML của bạn để nó trỏ đến đúng tệp CSS [bạn cũng nên cập nhật phần tử
   74 của mình thành một phần tử phù hợp hơn. ]
   8

3. Phía trên phần tử
   73 này, hãy thêm phần tử
   76 để áp dụng thư viện Modernizr cho trang, như hình bên dưới. Điều này cần được áp dụng cho trang trước bất kỳ CSS [hoặc JavaScript] nào có thể sử dụng nó
   1

4. Bây giờ hãy chỉnh sửa thẻ mở đầu
   77 của bạn để nó trông như thế này
   0

Tại thời điểm này, hãy thử tải trang của bạn và bạn sẽ biết cách Modernizr hoạt động cho các tính năng CSS. Nếu bạn xem trình kiểm tra DOM của các công cụ dành cho nhà phát triển của trình duyệt, bạn sẽ thấy rằng Modernizr đã cập nhật thuộc tính

Nó hiện chứa một số lượng lớn các lớp biểu thị trạng thái hỗ trợ của các tính năng công nghệ khác nhau. Ví dụ: nếu trình duyệt hoàn toàn không hỗ trợ lưới, thì

• 92 hoặc
  93 tùy thuộc vào việc phiên bản cũ của lưới có được hỗ trợ hay không

Ghi chú. Bạn có thể tìm thấy danh sách ý nghĩa của hầu hết các tên lớp — xem Các tính năng được phát hiện bởi Modernizr

Rất tiếc, Modernizr không kiểm tra khả năng hỗ trợ của một số tính năng CSS mới như truy vấn vùng chứa, lớp xếp tầng hoặc lưới con. Nếu đúng như vậy, chúng tôi sẽ cập nhật ví dụ về

Vì vậy, làm thế nào để làm việc này? . Vì vậy, ở đây chúng tôi chỉ áp dụng nhóm quy tắc hàng đầu cho các trình duyệt hỗ trợ lưới con và nhóm quy tắc dưới cùng chỉ áp dụng cho các trình duyệt không hỗ trợ [

Ghi chú. Tất cả các bài kiểm tra tính năng HTML và JavaScript của Modernizr đều được báo cáo dưới dạng tên lớp, vì vậy bạn có thể áp dụng CSS một cách có chọn lọc dựa trên việc trình duyệt có hỗ trợ các tính năng HTML hoặc JavaScript hay không, nếu cần

JavaScript

Modernizr cũng được chuẩn bị kỹ lưỡng để triển khai tính năng phát hiện JavaScript. Nó thực hiện điều này bằng cách cung cấp đối tượng toàn cầu

Ví dụ: tải lên ví dụ

Bảng điều khiển sẽ trả về các giá trị

Hãy xem một ví dụ để cho biết cách bạn sử dụng các thuộc tính đó

1. Trước hết, tạo một bản sao cục bộ của tệp ví dụ
   14
2. Đính kèm thư viện Modernizr vào HTML bằng phần tử
   76, như chúng tôi đã thực hiện trong các bản demo trước. Đặt nó phía trên phần tử
   76 hiện có, phần tử này đang đính kèm API Google Maps vào trang
3. Tiếp theo, điền vào văn bản giữ chỗ
   17 trong phần tử
   76 thứ hai [như hiện tại] bằng khóa API Google Maps hợp lệ. Để nhận khóa, hãy đăng nhập vào tài khoản Google, truy cập trang Nhận khóa/Xác thực, sau đó nhấp vào nút Nhận khóa màu xanh lam và làm theo hướng dẫn
4. Cuối cùng, thêm một phần tử
   76 khác ở dưới cùng của nội dung HTML [ngay trước thẻ
   80] và đặt đoạn mã sau vào bên trong các thẻ
   4

Hãy thử ví dụ của bạn. Ở đây chúng tôi sử dụng thử nghiệm

Tóm lược

Bài viết này đề cập đến tính năng phát hiện tính năng với số lượng chi tiết hợp lý, đi qua các khái niệm chính và chỉ cho bạn cách triển khai các bài kiểm tra phát hiện tính năng của riêng bạn và sử dụng thư viện Modernizr để triển khai các bài kiểm tra dễ dàng hơn

Làm cách nào để biết JavaScript có hoạt động trong Chrome hay không?

JavaScript đang chạy ở đâu?

Làm cách nào để kiểm tra xem hàm JS có hoạt động không?

JavaScript có còn hoạt động không?