JSフルスクリーンとフルスクリーン終了の詳細説明（コード含む）-jsチュートリアル-php.cn

JSフルスクリーンとフルスクリーン終了の詳細説明（コード含む）

亚连

リリース： 2018-05-19 14:20:22

オリジナル

9322 人が閲覧しました

フルスクリーンの終了とフルスクリーンの効果動画サイトを見ているとよく目にするかもしれませんが、ここでは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層連携効果を生み出す(コード付き)

Vue.js双方向バインディングの実装手順

以上がJSフルスクリーンとフルスクリーン終了の詳細説明（コード含む）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。