今日の仕事で、ウェブページの全画面表示が必要になったので、Baiduを調べて、ウェブページの全画面表示用のjQueryプラグイン「jquery FullScreen Plugin」を見つけました。 FF 10、Chrome、Safariなど様々なブラウザでウェブページの全画面表示を可能にし、拡大縮小<canvas>や要素設定が可能なより読みやすいウェブページをユーザーに提供するために使われています<video>。
jQuery フルスクリーンプラグイン
形容
このjQueryプラグインは、現代のブラウザの新しいフルスクリーンモードを制御するための使いやすい仕組みを提供します。 現在、この新しいフルスクリーン機能を提供するのは、ChromeやSafariのような新しいWebkitベースのブラウザ、Firefox、IE11+のみです。
使用例
フルスクリーンモードへの入り口
ページ全体または単一のHTML要素をフルスクリーンモードに切り替えることができます:
$(document).fullScreen(true);
$("#myVideo").fullScreen(true);
これは、コードがユーザーの操作(例えばボタンのオンクリックイベント)によってトリガーされた場合にのみ機能します。 ブラウザはユーザーの操作なしにフルスクリーンモードに入ることを許可していません。
フルスクリーンモードの終了
フルスクリーンモードは常にドキュメントから終了しますが、このプラグインは任意のHTML要素からも終了可能です。 選択したHTML要素の所有者ドキュメントが使用されます:
$(document).fullScreen(false);
$("#myVideo").fullScreen(false);
フルスクリーンモードへのクエリ
単に引数を渡さずにfullScreenメソッドに渡すだけで、現在の状態を問い合わせます。 このメソッドはフルスクリーンモードが有効な場合は現在のフルスクリーン要素(ブラウザが対応しない場合はtrue)、非アクティブならfalse、ブラウザがフルスクリーンをサポートしていない場合はnullを返します そもそもそのままの方法を。 この方法を使って、ブラウザがフルスクリーンモードをサポートしている場合にのみフルスクリーンボタンを表示することもできます:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
フルスクリーンモードの切り替え
このプラグインは、単純なフルスクリーンモードの切り替え方法をもう一つ提供しています:
$(document).toggleFullScreen();
通知
このプラグインは、フルスクリーンモードが変更された際に文書上でフルスクリーンチェンジイベントをトリガーします。 ブラウザがフルスクリーンの状態変更を拒否した場合、プラグインはドキュメント上でfullscreenerrorイベントをトリガーします。 例:
$(document).bind("fullscreenchange", function() {
console.log("Fullscreen " + ($(document).fullScreen() ? " 「on」 : 「off」))。
});
$(document).bind("fullscreenerror", function() {
alert("ブラウザが全画面変更を拒否しました");
});
フルスクリーンのiframe(全画面iフレーム)
iframe内からフルスクリーンモードに入ることはデフォルトでは許可されていませんが、iframeのいくつかの属性で有効化可能です:
<iframe src="iframe.html" webkit AllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
既知の問題点
IE 11では、iframe内からフルスクリーンに入ると空白ページが表示されます。 なぜかは全くわかりません。 どんな助けでも歓迎します。
Safari(少なくともSafari 7)では、フルスクリーンモードでキーボード入力は許可されていません。
GitHubアドレス:https://github.com/kayahr/jquery-fullscreen-plugin
観光客の皆さん、この投稿の隠された内容を見たい方は、どうぞ 答える
| 
掲載地 2017/08/14 16:34:52
|
|
|
掲載地 2017/08/14 17:08:18
|
掲載地 2017/11/25 14:35:17
|
