ホームページ > 記事 > ウェブフロントエンド > JSフルスクリーンとフルスクリーン終了の詳細説明（コード含む）
JSフルスクリーンとフルスクリーン終了の詳細説明（コード含む）
- 亚连オリジナル
- 2018-05-19 14:20:229241ブラウズ
フルスクリーンの終了とフルスクリーンの効果 動画サイトを見ているとよく目にするかもしれませんが、ここではjsのフルスクリーンを使用してフルスクリーンを終了するコード例を紹介しますので、必要な方は参考にしてください
。 JS フルスクリーンとフルスクリーンの終了
js はブラウザウィンドウのフルスクリーン機能を実現し、フルスクリーン機能を終了します。Google、Firefox、360 などの市場の主流ブラウザはすべて互換性がありますが、下位バージョンです。 IE には少し欠陥があります (全画面状態でも下部のステータス バーが残っています)。
このデモは基本的に、以下のソースコードをコピーして HTML ファイルとして保存するだけで効果を確認できます。
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js全屏和退出全屏代码</title>
<body>
<!-- requestFullScreen(document.documentElement): 整个网页进入全屏
requestFullScreen(document.getElementById("video-box")): 指定某块区域全屏
-->
<button onclick="requestFullScreen(document.documentElement)">全屏显示</button>
<button onclick="exitFull()">退出全屏</button>
</body>
<script type="text/javascript">
function requestFullScreen(element) {
// 判断各种浏览器，找到正确的方法
var requestMethod = element.requestFullScreen || //W3C
element.webkitRequestFullScreen || //Chrome等
element.mozRequestFullScreen || //FireFox
element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element);
}
else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
//全画面表示を終了する ブラウザの種類を決定します
function exitFull() {
// 判断各种浏览器，找到正确的方法
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //Chrome等
document.webkitExitFullscreen || //FireFox
document.webkitExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
}
else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
</script>
</html>全画面ブラウザでは通常、ショートカット キー F11 が押されることがわかっています。 JS がブラウザの全画面を制御することは珍しいことではありません。これにより、Web アプリケーションがネイティブ ソフトウェア アプリケーションのように見えます。例えば、発注システム、通話システムなど。
JS を使用してブラウザを全画面表示にしたり、全画面表示を終了したりする方法はたくさんありますが、重要なのは、ブラウザの全画面表示はマウス ジェスチャのクリック イベントによってのみトリガーされることに注意してください。
JS フルスクリーン メソッド
var $fullScreen = document.getElementById("js-fullScreen");//按钮
if ($fullScreen) {
$fullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
JS 終了フルスクリーン メソッド
var $cancelFullScreen = document.getElementById("js-cancelFullScreen");
if ($cancelFullScreen) {
$cancelFullScreen.addEventListener("click", function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}, false);
}
コンソール警告
「Element」で「requestFullscreen」の実行に失敗しました: API はユーザーのみが開始できますジェスチャー .
説明: 「Element」での「requestFullscreen」メソッドの実行に失敗しました。JavaScript API ではジェスチャーによる作成のみが可能です。 (つまり、権限がない)
通常、プログラマがブラウザを自動的に全画面表示するようトリガーしたいことが原因で発生します。ただし、このメソッドは動作しません。onload、trigger()、mouseover もトリガーできません。
公式説明
Element.requestFullscreen() メソッドは、要素を全画面表示にする非同期リクエストを発行します。ただし、要素が全画面モードになるという保証はありません。
全画面モードが許可されている場合、ドキュメントは fullscreenchange イベントを受け取り、現在全画面モードであることを通知します。アクセス許可が拒否された場合、ドキュメントは FullScreenError イベントを受け取ります。
結論
おそらくユーザーエクスペリエンスのため、クライアント側のJavaScriptでは、マウスジェスチャのクリックイベント、つまりclick()を通じてのみブラウザを全画面表示にすることができます。
上記は私があなたのためにまとめたものです。
関連記事:
Nodejs+Electron ubuntuインストール手順詳細解説
ネイティブJS+AJAXで3層連携効果を生み出す(コード付き)
以上がJSフルスクリーンとフルスクリーン終了の詳細説明（コード含む）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。