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): 整个⽹页进⼊全屏
ElementById("video-box")): 指定某块区域全屏
-->
<button onclick="requestFullScreen(document.documentElement)">全屏显⽰</button>
<button onclick="exitFull()">退出全屏</button>
</body>
<script type="text/javascript">
function requestFullScreen(element) {
// 判断各种浏览器，到正确的⽅法
var requestMethod = questFullScreen || //W3C
element.webkitRequestFullScreen || //Chrome等
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 = itFullscreen || //W3C
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>
网站底部代码js特效</html>
感谢阅读，希望嫩帮助到⼤家，谢谢⼤家对本站的⽀持！
以下是其它⽹友的补充
我们知道，浏览器全屏通常按快捷键F11。JS控制浏览器全屏也不稀奇，它让Web应⽤看上去更像似原⽣软件应⽤效果。⽐如点餐系统、叫号系统等等。
JS让浏览器全屏及退出全屏的⽅法⽹上很多，这不是重点，重点是需注意：浏览器全屏只能通过⿏标⼿势点击事件去触发。JS全屏⽅法
var $fullScreen = ElementById("js-fullScreen");//按钮
if ($fullScreen) {
$fullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (questFullscreen) {
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (RequestFullScreen) {
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
JS退出全屏⽅法
var $cancelFullScreen = ElementById("js-cancelFullScreen");
if ($cancelFullScreen) {
$cancelFullScreen.addEventListener("click", function () {
if (itFullscreen) {
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (CancelFullScreen) {
}
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也触发不了！
官⽅解释
该questFullscreen()⽅法发出异步请求，使元素全屏显⽰。但不能保证元素将被放⼊全屏模
式。
如果允许进⼊全屏模式，⽂档将收到⼀个fullscreenchange事件，让它知道它现在处于全屏模式。如果权限被拒绝，则⽂档会接收到⼀个fullscreenerror事件。
结论
可能出于⽤户操作体验的考虑吧，客户端javascript让浏览器全屏只能通过⿏标⼿势点击事件去触发，即click()。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。