JS 全屏和退出全屏详解及实例代码-PHP开发-PHP中文网

首页

php教程

PHP开发

JS 全屏和退出全屏详解及实例代码

高洛峰

Dec 07, 2016 pm 03:09 PM

JS 全屏和退出全屏

js实现浏览器窗口全屏和退出全屏的功能，市面上主流浏览器如：谷歌、火狐、360等都是兼容的，不过IE低版本有点瑕疵（全屏状态下仍有底部的状态栏）。

这个demo基本是够了，直接复制下面的源码另存为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>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

SublimeText3汉化版

中文版，非常好用

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

WebStorm Mac版

好用的JavaScript开发工具

SublimeText3 Linux新版

SublimeText3 Linux最新版

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。