JavaScript控制全屏,监听退出全屏事件

雨点打透心脏的1/2处 2022-05-19 13:38 1385阅读 0赞

本文转自:https://www.cnblogs.com/yiven/p/7885528.html

我们有时候可能需要自定义一些全屏事件,这个时候就要依靠JavaScript提供的全屏方法,废话不多说,直接上代码。

  1. //全屏功能
  2. function requestFullScreen(element) {
  3. // 判断各种浏览器,找到正确的方法
  4. var requestMethod = element.requestFullScreen || //W3C
  5. element.webkitRequestFullScreen || //FireFox
  6. element.mozRequestFullScreen || //Chrome等
  7. element.msRequestFullScreen; //IE11
  8. if (requestMethod) {
  9. requestMethod.call(element);
  10. } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
  11. var wscript = new ActiveXObject("WScript.Shell");
  12. if (wscript !== null) {
  13. wscript.SendKeys("{F11}");
  14. }
  15. }
  16. }
  17. //退出全屏 判断浏览器种类
  18. function exitFull() {
  19. // 判断各种浏览器,找到正确的方法
  20. var exitMethod = document.exitFullscreen || //W3C
  21. document.mozCancelFullScreen || //FireFox
  22. document.webkitExitFullscreen || //Chrome等
  23. document.webkitExitFullscreen; //IE11
  24. if (exitMethod) {
  25. exitMethod.call(document);
  26. } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
  27. var wscript = new ActiveXObject("WScript.Shell");
  28. if (wscript !== null) {
  29. wscript.SendKeys("{F11}");
  30. }
  31. }
  32. }

那上面的方法怎么用呢?退出全屏好说,直接调用上面的方法:

  1. exitFull();

进入全屏,需要传参,可用如下的方法整个网页进入全屏:

  1. requestFullScreen(document.documentElement);

我们可以将上面这句代码放在相应的事件函数中,直接执行就可以了。

那如果希望某些元素全屏,我们就可以用下面的这种方式:

  1. document.getElementById("btn").onclick = function () {
  2. var elem = document.getElementById("fullScreen");
  3. elem.style.width = "100%";
  4. elem.style.height = "100%";
  5. elem.style.overflowY = "scroll";
  6. requestFullScreen(elem); // 某个页面元素
  7. };

现在有了全屏和退出全屏的事件,那如果我们还想要监听退出全屏事件,然后做一些事件处理呢,当然也有监听方法啦。

  1. //监听退出全屏事件
  2. window.onresize = function () {
  3. if (!checkFull()) {
  4. //要执行的动作
  5. alert(111)
  6. }
  7. }
  8. function checkFull() {
  9. var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
  10. //to fix : false || undefined == undefined
  11. if (isFull === undefined) { isFull = false; }
  12. return isFull;
  13. }

发表评论

表情:
评论列表 (有 0 条评论,1385人围观)

还没有评论,来说两句吧...

相关阅读