Web——HTML5特性检测

最新推荐文章于 2022-08-16 18:58:47 发布
原创最新推荐文章于 2022-08-16 18:58:47 发布 · 1.2k 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#web #html5 #button #input #video #function
Web 专栏收录该内容
10 篇文章
订阅专栏
本文提供了一种通过JavaScript来检测浏览器是否支持HTML5各项新特性的方法，包括Canvas、视频播放、本地存储等功能的支持情况。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 New Feature Detect</title>
<script language="javascript" type="text/javascript">
function supports_canvas() {
	if(!!document.createElement('canvas').getContext) {
		alert('Support canvas!');
		return true;
	}
	else {
		alert('Not Support canvas!');
		return false;
    }
}

function supports_canvas_text() {
	var dummy_canvas = document.createElement('canvas');
	var context = dummy_canvas.getContext('2d');
	
	if(!!context) {
		if(typeof(context.fillText) == 'function') {
			alert("Support canvas text!");
			return true;
		}
		else {
			alert("Not support canvas text!");
			return false;
		}
	}
	else {
		return false;
	}
}

function supports_video() {
	if(!!document.createElement('video').canPlayType) {
		alert('Support video!');
		return true;
	}
	else {
		alert('Not Support video!');
		return false;
    }
}

function supports_h264_baseline_video() {
	var v = document.createElement('video');
	if(v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')) {
		alert('Support h264 baseline video!');
		return true;
	}
	else {
		alert('Not support h264 baseline video!');
		return false;
	}
}

function supports_ogg_theora_video() {
	var v = document.createElement('video');
	if(v.canPlayType('video/ogg; codecs="theora, vorbis"')) {
		alert('Support ogg theora video!');
		return true;
	}
	else {
		alert('Not support ogg theora video!');
		return false;
	}
}

function supports_webm_video() {
	var v = document.createElement('video');
	if(v.canPlayType('video/webm; codecs="vp8, vorbis"')) {
		alert('Support webm video!');
		return true;
	}
	else {
		alert('Not support webm video!');
		return false;
	}
}

function supports_local_storage() {
	if('localStorage' in window && window['localStorage'] != null) {
		alert('Support local storage!');
		return true;
	}
	else {
		alert('Not support local storage!');
		return false;
	}
}

function supports_web_workers() {
	if(!!window.Worker) {
		alert('Support web workers!');
		return true;
	}
	else {
		alert('Not support web workers!');
		return false;
	}
}

function supports_offline() {
	if(!!window.applicationCache) {
		alert('Support offline!');
		return true;
	}
	else {
		alert('Not support offline!');
		return false;
	}
}

function supports_geolocation() {
	if(!!navigator.geolocation) {
		alert('Support geolocation!');
		return true;
	}
	else {
		alert('Not support geolocation!');
		return false;
	}
}

function supports_input_types(type) {
	var result = false;

	var dummy_input = document.createElement('input')
	
	dummy_input.setAttribute("type", type);
	
	if(dummy_input.type != "text") {
		var msg = "Support input type: " + type;
		alert(msg);
		return true;
	}
	else {
		var msg = "Not support input type: " + type;
		alert(msg);
		return false;
	}
}

function supports_placeholder() {
	var i = document.createElement('input');
	if('placeholder' in i) {
		alert('Support placeholder!');
		return true;
	}
	else {
		alert('Not support placeholder!');
		return false;
	}
}

function supports_autofocus() {
	var i = document.createElement('input');
	if('autofocus' in i) {
		alert('Support autofocus!');
		return true;
	}
	else {
		alert('Not support autofocus!');
		return false;
	}
}

function supports_microdata() {
	if(!!document.getItems) {
		alert('Support microdata!');
		return true;
	}
	else {
		alert('Not support microdata!');
		return false;
	}
}
</script>
</head>
<body>
<input type="button" id="canvasTestBtn" value="canvas Test" onclick="supports_canvas();">
<br>
<input type="button" id="canvasTextTestBtn" value="canvas Text Test" onclick="supports_canvas_text();">
<br><br>
<input type="button" id="videoTestBtn" value="video Test" onclick="supports_video();">
<br>
<input type="button" id="h264TypeTestBtn" value="video h264 Test" onclick="supports_h264_baseline_video();">
<br>
<input type="button" id="oggTypeTestBtn" value="video ogg Test" onclick="supports_ogg_theora_video();">
<br>
<input type="button" id="webmTypeTestBtn" value="video webm Test" onclick="supports_webm_video();">
<br><br>
<input type="button" id="localStorageTestBtn" value="localStorage Test" onclick="supports_local_storage();">
<br><br>
<input type="button" id="webWorkersTestBtn" value="web workers Test" onclick="supports_web_workers();">
<br><br>
<input type="button" id="offlineTestBtn" value="offline Test" onclick="supports_offline();">
<br><br>
<input type="button" id="geolocationTestBtn" value="geolocation Test" onclick="supports_geolocation();">
<br><br>
<input type="button" id="searchInputTestBtn" value="search input Test" onclick="supports_input_types('search');">
<br>
<input type="button" id="numberInputTestBtn" value="number input Test" onclick="supports_input_types('number');">
<br>
<input type="button" id="rangeInputTestBtn" value="range input Test" onclick="supports_input_types('range');">
<br>
<input type="button" id="colorInputTestBtn" value="color input Test" onclick="supports_input_types('color');">
<br>
<input type="button" id="telInputTestBtn" value="tel input Test" onclick="supports_input_types('tel');">
<br>
<input type="button" id="urlInputTestBtn" value="url input Test" onclick="supports_input_types('url');">
<br>
<input type="button" id="emailInputTestBtn" value="email input Test" onclick="supports_input_types('email');">
<br>
<input type="button" id="dateInputTestBtn" value="date input Test" onclick="supports_input_types('date');">
<br>
<input type="button" id="monthInputTestBtn" value="month input Test" onclick="supports_input_types('month');">
<br>
<input type="button" id="weekInputTestBtn" value="week input Test" onclick="supports_input_types('week');">
<br>
<input type="button" id="timeInputTestBtn" value="time input Test" onclick="supports_input_types('time');">
<br>
<input type="button" id="datetimeInputTestBtn" value="datetime input Test" onclick="supports_input_types('datetime');">
<br>
<input type="button" id="placeholderTestBtn" value="placeholder attr Test" onclick="supports_placeholder();">
<br>
<input type="button" id="autofocusTestBtn" value="autofocus attr Test" onclick="supports_autofocus();">
<br><br>
<input type="button" id="microdataTestBtn" value="microdata Test" onclick="supports_microdata();">
</body>
</html>