只需一个按钮即可切换全屏API

时间:2016-06-13 11:39:13

标签: javascript jquery

我使用全屏API工作,只需单击一个按钮,然后单击另一个按钮退出全屏。我想用一个按钮打开和关闭全屏切换。

 var requestFullscreen = function(ele) {
    if (ele.requestFullscreen) {
        ele.requestFullscreen();
    } else if (ele.webkitRequestFullscreen) {
        ele.webkitRequestFullscreen();
    } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen();
    } else if (ele.msRequestFullscreen) {
        ele.msRequestFullscreen();
    } else {
        console.log('Fullscreen API is not supported.');
    }
};

var exitFullscreen = function() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else {
        console.log('Fullscreen API is not supported.');
    }
};

var fsDocButton = document.getElementById('fs-doc-button');
var fsExitDocButton = document.getElementById('fs-exit-doc-button');

fsDocButton.addEventListener('click', function(e) {
    e.preventDefault();
    requestFullscreen(document.documentElement);
});

fsExitDocButton.addEventListener('click', function(e) {
    e.preventDefault();
    exitFullscreen();
});
<button id="fs-doc-button">FULLSCREEN</button>
<button id="fs-exit-doc-button">EXIT FULLSCREEN</button>

2 个答案:

答案 0 :(得分:3)

gsub("(76|67)\\w","\\1",string)

答案 1 :(得分:1)

其他人是正确的,你需要某种布尔值来检测你应该取消或请求全屏。

但没有人考虑到您的用户可能会在不使用按钮的情况下取消全屏模式。

检查您是否已全屏使用的唯一跨浏览器方式是检查document.fullcreenElement。如果非null,则表示您已经全屏显示并退出。

var isFullScreened = function(){
  return document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement ||
    document.msFullscreenElement;
};
...
if(isFullScreened()){
  exitFs()
}
else{
  enterFS();
}