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

程序员文章站 2023-11-22 10:56:28

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

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()。

上一篇： C# 获取系统进程的用户名

下一篇： iOS自定义字体设置和系统自带的字体详解

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