时间戳

首页 > 解决方案 > 如何退出全屏模式并同时触发我自己的功能？

javascript - 如何退出全屏模式并同时触发我自己的功能？

问题描述

var class1 = document.getElementsByClassName("class1");
var img = document.getElementsByTagName("img");

function openFullscreen() {
    if (class1[0].requestFullscreen) {
        class1[0].requestFullscreen();
      } 
    else if (class1[0].mozRequestFullScreen) {
        class1[0].mozRequestFullScreen();
      } 
    else if (class1[0].webkitRequestFullscreen) {
        class1[0].webkitRequestFullscreen();
      } 
    else if (class1[0].msRequestFullscreen) {
        class1[0].msRequestFullscreen();
      }
    }

function closeFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } 
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } 
    else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } 
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

// Open fullscreen mode
class1[0].addEventListener("click", function() {
    openFullscreen();
    class1[0].setAttribute("id", "whileFullscreen");
});

//"ESC" key closes fullscreen
document.addEventListener("keydown", function() {
    var x = event.keyCode;
    if (x === 27) {
        class1[0].removeAttribute("id", "whileFullscreen");
    }
})
/* ///// ///// */

* {
    box-sizing: border-box;
    margin: 0px; 
    padding: 0px;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
}

/* ///// ///// */

.class1 {
    border: 10px solid #00f;
    
    height: 100vh;
    width: 100vw;
    
    background-color: #fff;
}

img {
    border: 2px solid #f00;
    
    display: flex;
    
    height: 200px;
    width: 200px;
}

#whileFullscreen {
    display: flex;
    
    background-color: #000;
    
    justify-content: center;
    align-items: center;
}
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Key Event with Fullscreen Mode</title>
    <link href="css/KEFM.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="class1">
        <img src="" alt="Example Image"/>
    </div>
    
    
    
    
    
    
    
    <script src="js/KEFM.js"></script>
</body>
</html>

你好，

我正在为摄影师创建一个网站。从“点击”事件中，我将浏览器更改为全屏模式，同时还触发了我自己的函数来更改各种不同的 css 信息。这完美地工作。

问题是当我按下“esc”键退出全屏模式时，我希望它也对css信息进行更改。我试图通过一个也附加到“esc”键的“keydown”事件监听器来实现这一点。

结果是该事件在全屏模式下不会触发，因此一旦退出全屏模式，您必须再次按下它。

很感谢任何形式的帮助。

标签： javascripthtmlcss

解决方案

你可以利用这个onfullscreenchange事件。

首先，让我们绑定到事件（您可能也想对其他浏览器执行此操作）：

document.addEventListener("fullscreenchange", closeFullscreen, false);

请注意，onfullscreenchange更改事件将在打开和关闭时触​​发。因此，您还需要修改closeFullscreen以检查触发的事件是否是关闭全屏模式。所以在closeFullscreen函数内部，将代码包装在： 

if (!document.fullscreenElement){
    // Your current closeFullscreen code here
}

然后，如果您愿意，您也可以将删除 ID 的代码移动到您的closeFullscreen函数中。

if (!document.fullscreenElement){
    class1[0].removeAttribute("id", "whileFullscreen");
    // Your current closeFullscreen code here
}

推荐阅读