HTML5 API ブラウザのサポート検出の詳細な紹介

HTML5は今日まで発展してきました。広く普及しているわけではありませんが、私たちの日常で簡単に目にすることができます。 、HTML5 のゲーム、Web サイト、アプリケーションも無限に登場しています。フロントエンド スタッフとして、将来のアプリケーションの基礎を築くために、これらの API についても詳しく知っておく必要があります。 HTML5のAPIと各APIのブラウザを添付します。 検出方法は主に最近の「html5の秘密」や「html5高度なプログラミング」を参考にしています

まずは、昔から使われているオープンソースのModernizrを紹介します。 HTML5 および CSS3 機能に対するブラウザーのサポートを検出します。JavaScript クラス ライブラリ 、最新バージョンはバージョン 2.5.3 (ダウンロード)、使用方法は非常に簡単で、JS をページに導入した後、自動的に実行され、 Modernizr グローバル オブジェクト は、それぞれに使用できます。検出された特徴により、ブール型 の対応する 属性 が作成されます。これを呼び出すだけです。たとえば、

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

1。 Canvas1。 -依存ビットマップ キャンバスと描画されるグラフィックス スケーラブルではありません。Javascript を使用して Canvas に任意のグラフィックスを描画でき、さらには写真を読み込むこともできます。HTML5 標準では、単純なグラフィックスの描画、パスの定義、グラデーションの作成のための一連の Canvas API が策定されています。 Canvas は、デフォルトで幅 300 ピクセル、高さ 150 ピクセルの長方形の領域です。
注: Canvas によって描画されるオブジェクトは、ページの DOM 構造や他の
名前空間に属しません。

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

2.オーディオとビデオ

この要素の出現により、開発者はプラグインを使用せずにオーディオまたはビデオを再生できるようになり、HTML5 仕様では、ユニバーサルで完全なスクリプト可能なコントロール API

// 创建一个 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;

を検出したい場合も提供されます。デフォルトの形式がサポートされている場合は、次のように書くことができます:

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

ネイティブ メソッドは "おそらく"、"たぶん"、または "" を返します。これはそれぞれ、「この形式を確実に再生できる」、「おそらくこの形式を再生できる」ことを意味します。 「この形式は絶対に再生できません」

canPlayType()。メソッドで渡されるパラメータはテキストで表現され、「theora」エンコード形式でビデオを再生できるか、カプセル化された「vorbis」形式でオーディオを再生できるかどうかをブラウザに問い合わせます。

3.Web Storage

Web Storage (DOMStorage とも呼ばれます) を使用すると、開発者は Javascript オブジェクトにデータを保存できます。このオブジェクトはページの読み込み時に保存され、簡単にアクセスできます。開発者は、新しいウィンドウまたは新しい タブを開いたとき、およびブラウザを再起動したときにこのデータをアクティブにするかどうかを選択できます。保存されたデータはネットワークを介して送信されず、最大数メガバイトのビッグデータを保存できます。

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

4.Web Workers

Web Workers を使用すると、Web アプリケーションにバックグラウンド処理機能を持たせることができ、マルチスレッドを非常によくサポートします。したがって、HTML5 を使用する Javascript アプリケーションは、マルチコア CPU を最大限に活用し、長期タスクを Web ワーカーに割り当てて実行できます。 注: Web ワーカーで実行されるスクリプトは、ページのウィンドウ オブジェクトにアクセスできません。

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

5.オフライン Web アプリケーション

HTML5 のオフライン アプリケーション キャッシュを使用すると、ネットワーク接続なしでアプリケーションを実行できます。オフライン アクセス機能を備えた Web サイトに初めてアクセスすると、Web サーバーは、オフラインでの通常の操作を保証するために必要なファイルをブラウザーに通知します。これらのファイルは、HTML、JavaScript、画像、ビデオなどの任意のファイルです。

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

6.Geolocation

HTML5 の地理位置情報 API は、世界中のどこにいるのかを特定し、許可を得て位置情報を共有できます。この素晴らしい機能を使用して、多くの興味深いアプリケーションを構築できます。たとえば、走行距離の計算、GPS ナビゲーションに基づくソーシャル アプリケーションなどです。 IP アドレス、GPS 地理位置情報、Wi-Fi 地理位置情報、携帯電話地理位置情報、およびカスタム地理位置情報を通じて位置データを取得します。

// 支持的话，全局 navigator 对象会有一个 geolocation 属性
var hasGeolocation = navigator.geolocation;
// modernizr检测方法
var hasGeolocation = Modernizr.geolocation;

7. フォーム

HTML5 では、検索を表す検索、数値タイプの入力ボックス番号、範囲選択スライダーの範囲、カラーセレクターの色、電話番号入力ボックスの電話番号、URL 入力ボックスの URL、電子メール入力ボックスなど、多くの新しい入力ボックスの種類が定義されています。電子メール、日付セレクターの日付、月入力ボックス month、週入力ボックス week、タイムスタンプ入力ボックス time、正確な日付/タイムスタンプ入力および終了ボックス datetime、ローカル日付と時刻入力ボックス datetime-local。

// 创建一个 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 中国語 Web サイトの他の関連記事を参照してください。