JS 全屏和退出全屏详解（含有代码）
退出全屏效果与全屏效果我们可能在看视频网站时看到多,这里来为各位介绍利用js全屏和退出全屏代码范例吧，,需要的朋友可以参考下
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()。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是JS 全屏和退出全屏详解（含有代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
Win11管理员权限获取详解
Mar 08, 2024 pm 03:06 PM
Windows操作系统是全球最流行的操作系统之一，其新版本Win11备受瞩目。在Win11系统中，管理员权限的获取是一个重要的操作，管理员权限可以让用户对系统进行更多的操作和设置。本文将详细介绍在Win11系统中如何获取管理员权限，以及如何有效地管理权限。在Win11系统中，管理员权限分为本地管理员和域管理员两种。本地管理员是指具有对本地计算机的完全管理权限
Oracle SQL中的除法运算详解
Mar 10, 2024 am 09:51 AM
OracleSQL中的除法运算详解在OracleSQL中，除法运算是一种常见且重要的数学运算操作，用于计算两个数相除的结果。除法在数据库查询中经常用到，因此了解OracleSQL中的除法运算及其用法是数据库开发人员必备的技能之一。本文将详细讨论OracleSQL中除法运算的相关知识，并提供具体的代码示例供读者参考。一、OracleSQL中的除法运算
PHP模运算符的作用及用法详解
Mar 19, 2024 pm 04:33 PM
PHP中的模运算符（%）是用来获取两个数值相除的余数的。在本文中，我们将详细讨论模运算符的作用及用法，并提供具体的代码示例来帮助读者更好地理解。1.模运算符的作用在数学中，当我们将一个整数除以另一个整数时，会得到一个商和一个余数。例如，当我们将10除以3时，商为3，余数为1。模运算符就是用来获取这个余数的。2.模运算符的用法在PHP中，使用%符号来表示模
linux系统调用system()函数详解
Feb 22, 2024 pm 08:21 PM
Linux系统调用system()函数详解系统调用是Linux操作系统中非常重要的一部分，它提供了一种与系统内核进行交互的方式。其中，system()函数是一个常用的系统调用函数之一。本文将详细介绍system()函数的使用方法，并提供相应的代码示例。系统调用的基本概念系统调用是用户程序与操作系统内核交互的一种方式。用户程序通过调用系统调用函数来请求操作系统
Linux的curl命令详解
Feb 21, 2024 pm 10:33 PM
Linux的curl命令详解摘要：curl是一种强大的命令行工具，用于与服务器进行数据通信。本文将介绍curl命令的基本用法，并提供实际的代码示例，帮助读者更好地理解和应用该命令。一、curl是什么？curl是一个命令行工具，用于发送和接收各种网络请求。它支持多种协议，如HTTP、FTP、TELNET等，并提供了丰富的功能，如文件上传、文件下载、数据传输、代
简易JavaScript教程：获取HTTP状态码的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest
详细解析C语言学习路线
Feb 18, 2024 am 10:38 AM
C语言作为一门广泛应用在软件开发领域的编程语言，是很多程序员初学者的首选。学习C语言不仅可以帮助我们建立编程的基础知识，还可以提升我们解决问题和思考的能力。本文将详细介绍一条C语言学习的路线图，帮助初学者更好地规划自己的学习进程。1.学习基本语法在开始学习C语言之前，我们首先需要了解C语言的基本语法规则。这包括变量和数据类型、运算符、控制语句（如if语句、
深入了解Promise.resolve()
Feb 18, 2024 pm 07:13 PM
Promise.resolve()详解，需要具体代码示例Promise是JavaScript中一种用于处理异步操作的机制。在实际开发中，经常需要处理一些需要按顺序执行的异步任务，而Promise.resolve()方法就是用来返回一个已经Fulfilled状态的Promise对象。Promise.resolve()是Promise类的一个静态方法，它接受一个
