html5 检测浏览器是否支持新特性

最新推荐文章于 2021-06-17 04:54:14 发布

原创最新推荐文章于 2021-06-17 04:54:14 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种检测浏览器是否支持特定功能的方法，包括canvas API、video、本地存储、web workers等功能。通过简单的JavaScript函数，可以判断浏览器对这些特性的支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="font-size:18px;">if (Modernizr.***){
	//<span style="font-family: Arial, Helvetica, sans-serif;">浏览器提供***支持</span>

}else{
	//浏览器没有提供***支持
}</span>

1.检测浏览器是否支持canvas API

<span style="font-size:18px;">function supports_canvas(){
	return !!document.createElement('canvas').getContext;
}</span>

该函数创建一个虚拟的<canvas>元素；!!是双重否定来强制返回布尔值

2.检测浏览器是否支持 video

<span style="font-size:18px;">function supports_video(){
	return !!document.createElement('video').canPlayType;
}</span>

3.检测浏览器是否支持本地存储

<span style="font-size:18px;">function supports_local_storage(){
<span style="white-space:pre">	</span>return ('localStorage' in window) && window['localStorage'] !==null;
}</span>

4.检测浏览器是否支持web workers：让浏览器在后台运行JS，通过Web Worker，可以产生多个“线程”。

<span style="font-size:18px;">function supports_web_workers(){
<span style="white-space:pre">	</span>return !!window.worker;
}</span>

5.检测浏览器是否支持离线

<span style="font-size:18px;">function supports_offline(){
<span style="white-space:pre">	</span>return !!window.applicationCache;
}</span>

6.检测浏览器是否支持地理位置

<span style="font-size:18px;">function supports_geolocation(){
<span style="white-space:pre">	</span>return !!navigator.geolocation;
}</span>