JSフルスクリーンとフルスクリーン終了の詳しい説明とサンプルコード

高洛峰
リリース: 2016-12-07 15:09:40
オリジナル
1316 人が閲覧しました

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>
ログイン後にコピー


関連ラベル:
js
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!