HTML5 API 브라우저 지원 감지에 대한 자세한 소개

HTML5는 현재까지 발전해왔습니다. 널리 대중화되지는 않았지만 HTML5 게임, 웹사이트, 애플리케이션이 끝없이 등장하는 것을 우리 생활 속에서 쉽게 볼 수 있습니다. 프론트엔드 직원으로서 이러한 API에 대해서도 더 많이 알아야 합니다. 아래에서는 새로운 HTML5에 대해 소개하고, 각 API의 브라우저 감지 방법을 주로 언급하겠습니다.

먼저 HTML5 및 CSS3 기능에 대한 브라우저 지원을 감지하는 데 사용되는 오픈 소스 Javascript 클래스 라이브러리를 소개합니다. (다운로드) 페이지에서 JS를 도입하면 자동으로 실행되어 해당 부울 유형 객체가 생성됩니다. > 감지 가능한 각 기능에 대해 속성을 ​​호출하면 됩니다. 예를 들면 다음과 같습니다.

if( Modernizr.canvas ){  
// 恩，我知道这个属性，他是画图用的：）
}
else{  
// canvas 这是个什么东东？？
}

1. Canvas

Canvas는 해상도에 따른 비트맵 캔버스이며 그리는 그래픽은 확장 가능하지 않으며 Javascript를 통해 Canvas에 그래픽을 그릴 수 있고 심지어 사진을 로드할 수도 있습니다. HTML5 표준은 간단한 그래픽 그리기, 경로 정의, 그라디언트 만들기 및 이미지 변환 적용을 위한 일련의 Canvas API를 공식화했습니다. 기본적으로 가로 300픽셀, 세로 150픽셀입니다. 참고: Canvas로 그린 개체는 페이지 DOM 구조나 다른
네임스페이스
에 속하지 않습니다.

2. 오디오와 비디오

의 등장으로 개발자는 플러그인을 사용하지 않고도 오디오나 비디오를 재생할 수 있습니다. 또한 HTML5 사양은 범용적이고 완전한 스크립트 가능한 제어 API를 제공합니다. <🎜. >

// 创建一个 Canvas 元素，并检查该元素是否拥有 getContext() 方法，然后用双否定强制返回一个布尔值
var hasCanvas = !!document.createElement("canvas").getContext;
// Modernizr检测方法，返回布尔值
var hasCanvas = Modernizr.canvas ;

받아쓰기 형식이 지원되는지 확인하려면 다음과 같이 작성하세요.

// 创建一个 Audio 元素，并检查该元素是否拥有 canPlayType() 方法，然后用双否定强制返回一个布尔值
var hasAudio = !!document.createElement("audio").canPlayType;
// modernizr检测方法
var hasAudio = Modernizr.audio;
// 创建一个 Video 元素，并检查该元素是否拥有 canPlayType() 方法，然后用双否定强制返回一个布尔值
var hasVideo = !!document.createElement("video").canPlayType;
// modernizr检测方法
var hasVideo = Modernizr.video;

네이티브 메서드는 각각 "아마도", "아마도" 또는 ""를 반환합니다. "완전히 이 형식을 재생합니다.", ""이 형식을 재생할 수 있습니다.", "이 형식을 재생할 수 없는 것이 확실합니다."

canPlayType() 메서드에서 전달된 매개변수는 다음과 같이 표현됩니다. ogg 컨테이너에 캡슐화된 "theora" 인코딩 형식을 재생할 수 있는지 브라우저에 묻는 텍스트입니다. "vorbis" 형식의 비디오 및 오디오

3. Web Storage (DOMStorage라고도 함)을 사용하면 개발자가 페이지의 Javascript 개체에 데이터를 저장하고 쉽게 액세스할 수 있습니다. 개발자는 새 창이나 새

탭

을 열 때, 그리고 브라우저를 다시 시작할 때 이 데이터를 활성화할지 여부를 선택할 수 있습니다. 저장된 데이터는 네트워크를 통해 전송되지 않으며 최대 수 메가바이트의 빅데이터를 저장할 수 있습니다. rree
4. Web WorkersWeb Workers는 웹 애플리케이션이 백그라운드 처리 기능을 갖도록 할 수 있으며 멀티스레딩을 매우 잘 지원합니다. 따라서 HTML5를 사용하는 Javascript 애플리케이션은 멀티 코어 CPU를 최대한 활용하고 실행을 위해 Web Worker에 장기 작업을 할당할 수 있습니다.

참고: Web Workers에서 실행되는 스크립트는 페이지의 창 개체에 액세스할 수 없습니다.

var hasVideo = document.createElement("video").canPlayType('video/ogg; codecs="theora, vorbis"')；
// modernizr检测方法
var hasVideo = Modernizr.video.ogg;

5.오프라인 웹 애플리케이션

HTML5의 오프라인 애플리케이션 캐시를 사용하면 네트워크 연결 없이도 애플리케이션을 실행할 수 있습니다. 오프라인 액세스 기능이 있는 웹 사이트를 처음 방문하면 웹 서버는 브라우저에 HTML, Javascript, 이미지 또는 비디오 등의 정상적인 작동을 보장하는 데 필요한 파일을 알려줍니다.

// 支持的话，全局 window 对象会有一个 localStorage 属性
var hasWebStorage = window.localStorage;
// modernizr检测方法
var hasWebStorage = Modernizr.localstorage;

6.Geolocation
HTML5의 geolocation API는 귀하가 전 세계 어디에 있는지 확인하고 허가를 받아 위치 정보를 공유할 수 있습니다. 이 놀라운 기능을 사용하면 많은 흥미로운 애플리케이션을 구축할 수 있습니다. 예를 들어, 주행 거리 계산, GPS 내비게이션 기반 소셜 애플리케이션 등 IP 주소, GPS 위치정보, Wi-Fi 위치정보, 휴대폰 위치정보 및 사용자 지정 위치정보를 통해 위치 데이터를 얻습니다.

// 支持的话，全局 window 对象会有一个 Worker 属性
var hasWorker = window.Worker;
// modernizr检测方法
var hasWorker = Modernizr.webworkers;

7.Forms
HTML5는 검색을 나타내는 검색, 숫자 유형 입력 상자 번호, 범위 선택 슬라이더 범위, 색상 선택기 색상, 전화번호 입력 상자 등 다양한 새로운 입력 상자 유형을 정의합니다. 전화번호, 웹사이트 주소 입력란 url, 이메일 입력란 이메일, 날짜 선택기 날짜, 월 입력란 월, 주 입력란 주, 타임스탬프 입력란 시간, 정확한 날짜/타임 스탬프 입력 및 종료 상자 datetime, 현지 날짜 및 시간 입력란 datetime -현지의.

// 创建一个 input 元素，该元素默认是 text 类型，改变他的类型，然后查看改变是否被保留
var o = document.createElement("input");o.setAttribute("type","color");return i.type != "text";
// modernizr检测方法
var hasInputType = Modernizr.inputtypes.color;

8.WebSockets
WebSockets 是 HTML5 中最强大的通信功能，它定义了一个全双工通信通道（又称为双向同时通信，即通信的双方可以同时发送和接受信息的信息交互方式），仅通过 Web 上的一个 Socket 即可进行通信。它不仅仅是对常规 HTTP 通信的另一种增量加强，更代表着一次巨大的进步，对实时的、事件驱动的程序而言更是如此。

// 支持的话，全局 window 对象会有一个 webSocket 属性
var hasWebSocket = window.webSocket;
// modernizr检测方法
var hasWebSocket = Modernizr.websockets;

8.Communication
Communication 是 HTML5 中用来实现正在运行的两个页面之间（iframe、标签页、窗口）进行跨源通信和信息共享的API。它把 postMessage API 定义为发送消息的标准方式。

// 支持的话，全局 window 对象会有一个 postMessage 属性
var hasPostMessage = window.postMessage;
// modernizr检测方法
var hasPostMessage = Modernizr.postmessage;

API 的浏览器支持情况主要介绍这些，以后我会逐个 API 进行详细讲解，把自己学到和研究的东西共享出来，欢迎大家来一块交流学习：）

위 내용은 HTML5 API 브라우저 지원 감지에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!