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

2024-10-20 19:51:12

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>

感谢阅读，希望嫩帮助到大家，谢谢大家对本站的支持！

以下是其它网友的补充

我们知道，浏览器全屏通常按快捷键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);
}

控制台警告

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

释义：在"Element"上执行"requestFullscreen"方法失败，javascript API仅允许通过手势去创建！（即没有权限）

通常是由于程序员想触发浏览器自动全屏显示而导致。但是很抱歉，此方法行不通，必须通过手势去创建，哪怕onload、trigger()、mouseover也触发不了！

官方解释

该Element.requestFullscreen()方法发出异步请求，使元素全屏显示。但不能保证元素将被放入全屏模式。

如果允许进入全屏模式，文档将收到一个fullscreenchange事件，让它知道它现在处于全屏模式。如果权限被拒绝，则文档会接收到一个fullscreenerror事件。

结论

可能出于用户操作体验的考虑吧，客户端javascript让浏览器全屏只能通过鼠标手势点击事件去触发，即click()。

JavaScript全屏和退出全屏事件总结（附代码）

代码如下: window.isflsgrn = false;//ie11以下是否进入全屏标志,true为全屏状态,false为非全屏状态 window.ieIsfSceen = false;//ie11是否进入全屏标志,true为全屏状态,false为非全屏状态 //跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态 function fullscreenEnable(){ var isFullscreen = document.fullscreenEnabled || win
Android 应用的全屏和非全屏实现代码

Android 应用的全屏和非全屏实现代码全屏显示操作: /** * 全屏显示 */ private void setFullSreen() { WindowManager.LayoutParams params = getWindow().getAttributes(); params.flags |= WindowManager.LayoutParams.FLAG_FULLSCREEN; getWindow().setAttributes(params); getWindow().addF
Android全屏设置的方法总结

Android 有两种方式可以设置全屏. 第一种方式:在protected void onCreate(Bundle savedInstanceState) 里面的this.setContentView() 之前加入以下代码 //取消标题 this.requestWindowFeature(Window.FEATURE_NO_TITLE); //取消状态栏 this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
JS实现全屏的四种写法

JS或jQuery实现全屏 JS写法一 .html <div class="container" <button id="full-screen">全屏</button> <button id="exit-fullscreen">退出</button> </div> .css /* Basic element styles */ html { color: #000; backgr
jquery横向纵向鼠标滚轮全屏切换

本文实例为大家分享了鼠标滚轮全屏切换的jquery代码,供大家参考,具体内容如下 html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name
js控制页面的全屏展示和退出全屏显示的方法

本文实例讲述了js控制页面的全屏展示和退出全屏显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <div style="margin:0 auto;heig
JS 实现计算器详解及实例代码（一）

Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板
Java 两种延时thread和timer详解及实例代码

Java 两种延时thread和timer详解及实例代码在Java中有时候需要使程序暂停一点时间,称为延时.普通延时用Thread.sleep(int)方法,这很简单.它将当前线程挂起指定的毫秒数.如 try { Thread.currentThread().sleep(1000);//毫秒 } catch(Exception e){} 在这里需要解释一下线程沉睡的时间.sleep()方法并不能够让程序"严格"的沉睡指定的时间.例如当使用5000作为sleep()方法的参数时,线程
微信小程序中实现一对多发消息详解及实例代码

微信小程序中实现一对多发消息详解及实例代码微信小程序中各个界面之间的传值和通知比较蛋疼.所以模仿了iOS中的通知中心,在微信小程序中写了一套类似的通知中心. 通知中心可以做到:1对多发消息,传递object.使用十分简洁. 使用时,在需要接收消息的界面注册一个通知名.然后在需要发消息的界面post这个通知名就可以了.可以在多个界面注册同一个通知名.这样就可以1对多发消息. 使用方法: 1:在app.js中引用notification.js var notificationCenter = re
MyBatis获取数据库自生成的主键Id详解及实例代码

MyBatis获取数据库自生成的主键Id详解及实例代码在使用MySQL数据库时我们一般使用数据库的自增主键自动产生主键.如果在插入主表时,我们需要同时插入从表的数据,这时我们通常需要知道主表插入时自动产生的主键Id值. 下面介绍使用MyBatis进行插入时,如何同时获取数据库自生成的主键: 1.XML配置文件 <insert id="insert" parameterType="Person" useGeneratedKeys="true"
MySQL 序列 AUTO_INCREMENT详解及实例代码

MySQL 序列 AUTO_INCREMENT详解及实例代码 MySQL序列是一组整数:1, 2, 3, ...,由于一张数据表只能有一个字段自增主键, 如果你想实现其他字段也实现自动增加,就可以使用MySQL序列来实现. 本章我们将介绍如何使用MySQL的序列. 使用AUTO_INCREMENT MySQL中最简单使用序列的方法就是使用 MySQL AUTO_INCREMENT 来定义列. 实例以下实例中创建了数据表insect, insect中id无需指定值可实现自动增长. mysql>
Spring组件自动扫描详解及实例代码

Spring组件自动扫描详解及实例代码问题描述一个系统往往有成千上万的组件,如果需要手动将所有组件都纳入spring容器中管理,是一个浩大的工程. 解决方案 Spring 提供组件扫描(component scanning)功能.它能从classpath里自动扫描.侦测和实例化具有特定注解的组件.基本的注解是@Component,它标识一个受Spring管理的组件.其他特定的注解有@Repository.@Service和@Controller,它们分别标识了持久层.服务处和表现层的组件.
Java中自定义异常详解及实例代码

Java中自定义异常详解及实例代码下面做了归纳总结,欢迎批评指正自定义异常 class ChushulingException extends Exception { public ChushulingException(String msg) { super(msg); } } class ChushufuException extends Exception { public ChushufuException(String msg) { super(msg); } } 自定义异常 En
Spring AOP 基于注解详解及实例代码

Spring AOP 基于注解详解及实例代码 1.启用spring对@AspectJ注解的支持: <beans xmlns:aop="http://www.springframework.org/schema/aop"...>  <aop:aspectj-autoproxy /> </beans> 也可以配置AnnotationAwareAspectJAutoProxyCreator Bean来启动Spring对@
java多线程编程技术详解和实例代码

java多线程编程技术详解和实例代码 1. Java和他的API都可以使用并发. 可以指定程序包含不同的执行线程,每个线程都具有自己的方法调用堆栈和程序计数器,使得线程在与其他线程并发地执行能够共享程序范围内的资源,比如共享内存,这种能力被称为多线程编程(multithreading),在核心的C和C++语言中并不具备这种能力,尽管他们影响了JAVA的设计. 2. 线程的生命周期新线程的生命周期从"新生"状态开始.程序启动线程前,线程一直是"新生"状态:
java 单播、广播、组播详解及实例代码

java 单播.广播.组播详解及实例代码在当前网络通信中(TCP/IP也不例外)有三种通信模式:单播.广播.组播(又叫多播, 个人感觉叫多播描述的有点不恰当),其中多播出现的时间最晚,但同时具备单播和广播的优点,最具有发展前景. 一.通信方式分类: 1.单播:单台主机与单台主机之间的通信: 2.广播:单台主机与网络中所有主机的通信: 3.组播:单台主机与选定的一组主机的通信: 二.单播: 单播是网络通信中最常见的,网络节点之间的通信就好像是人们之间的对话一样.如果一个人对另外一个人说话

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

相关推荐

随机推荐