如何使用Javascript退出全屏点击？答案

【问题标题】：How to exit fullscreen onclick using Javascript?如何使用Javascript退出全屏点击？
【发布时间】：2016-04-17 04:07:02
【问题描述】：

不确定以下代码片段是否可以嵌入到 SO 中，因为它在粘贴时不起作用，但它确实可以独立工作。

问题是我希望这是一个切换；不仅要进入全屏模式，而且如果用户处于全屏状态则退出它。它完美地进入全屏模式，并执行退出全屏代码（如 alert() 框所示，它在退出代码之后但仅在退出代码条件内运行）但它什么也不做。

我已经阅读了这个here 和here，这似乎我做的一切都是正确的，但是缺少一些东西。请您帮忙弄清楚如何使这个程序代码工作。

function fullscreen() {
	var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
		(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
		(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
		(document.msFullscreenElement && document.msFullscreenElement !== null);

	var docElm = document.documentElement;
	if (!isInFullScreen) {
		if (docElm.requestFullscreen) {
			docElm.requestFullscreen();
		} else if (docElm.mozRequestFullScreen) {
			docElm.mozRequestFullScreen();
		} else if (docElm.webkitRequestFullScreen) {
			docElm.webkitRequestFullScreen();
		} else if (docElm.msRequestFullscreen) {
			docElm.msRequestFullscreen();
		}
	} else {
		if (docElm.exitFullscreen) {
			docElm.exitFullscreen();
		} else if (docElm.webkitExitFullscreen) {
			docElm.webkitExitFullscreen();
		} else if (docElm.mozCancelFullScreen) {
			docElm.mozCancelFullScreen();
		} else if (docElm.msExitFullscreen) {
			docElm.msExitFullscreen();
		}
		alert('exit fullscreen, doesnt work');
	}
}

&lt;a onclick="fullscreen()" href="javascript:void(0);"&gt;Toggle FullScreen&lt;/a&gt;

我也尝试在警报代码所在的位置添加parent.exitfs()，根据this questions accepted answer，仍然没有影响

【问题讨论】：

标签： javascript html

【解决方案1】：

想通了。

显然，要进入全屏，你需要使用Element，但要退出全屏，你使用document。

这是切换全屏的完整javascript函数！！！

function fullscreen() {
    var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
        (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
        (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
        (document.msFullscreenElement && document.msFullscreenElement !== null);

    var docElm = document.documentElement;
    if (!isInFullScreen) {
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) {
            docElm.msRequestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

以及如何使用它的简单案例：

<button onclick="fullscreen()">Toggle FullScreen</button>

您需要确保这是用户在页面上执行操作时调用的简短方法。根据文档所说，这是一个需要更高访问模式的功能，因此您不能（此时）自动强制全屏显示页面加载时或异步事件（除非它们是来自用户操作，如点击）等。

【讨论】：

显然，我收到了这个错误`document.exitFullscreen is not a function`。有什么想法吗？
@Nigel 通常这意味着您的浏览器不支持全屏 API。这就是你使用所有 if 块的原因。并检查是否有任何拼写错误。

【解决方案2】：

这里提供的解决方案非常长。您可以使用这几行来显示或取消全屏。

显示全屏：

  /* You can use any HTML element through JS selector functions
   * eg. document.querySelector(".example");
  */
const element = document; 
const requestFullScreen = element.requestFullscreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
requestFullScreen.call(element);

取消全屏：

// As correctly mentioned in the accepted answer, exitFullscreen only works on document
const cancellFullScreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
cancellFullScreen.call(document);

Chrome 将显示错误：Uncaught (in promise) TypeError: Document not active 如果 exitFullscreen 不在时被调用全屏模式。

【讨论】：

【解决方案3】：

一个更通用的助手（来自接受的答案）...

获取模式

可以在不带参数的情况下调用该函数来确定浏览器当前是否处于全屏模式。如果是则返回true，否则返回false。

设置模式

可以使用布尔值调用该函数来显式设置当前模式，其中true 确保浏览器处于全屏模式，false 确保不是。

切换模式

可以使用null 作为唯一参数调用该函数，以将模式隐式设置为与其当前所处的模式相反的模式。

let fullscreen = function() {

    let enter = function() {
        let body = document.body;
        if (body.requestFullscreen) body.requestFullscreen();
        else if (body.webkitRequestFullscreen) body.webkitRequestFullscreen();
        else if (body.mozRequestFullScreen) body.mozRequestFullScreen();
        else if (body.msRequestFullscreen) body.msRequestFullscreen();
    };

    let exit = function() {
        if (document.exitFullscreen) document.exitFullscreen();
        else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
        else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
        else if (document.msExitFullscreen) document.msExitFullscreen();
    };

    let attemptToGetState = element => element && element !== null;

    return function(action=undefined) {
        if (action === true) enter();
        else if (action === false) exit();
        else {
            let currentlyFullscreen = (
                attemptToGetState(document.fullscreenElement)       ||
                attemptToGetState(document.webkitFullscreenElement) ||
                attemptToGetState(document.mozFullScreenElement)    ||
                attemptToGetState(document.msFullscreenElement)
            );
            if (action === undefined) return !! currentlyFullscreen;
            else currentlyFullscreen ? exit() : enter();
        }
    };

}();

【讨论】：

exit 是保留字。不确定您是否可以将其用作变量而不会出错。
我的立场是正确的。使用通常保留的单词感觉很奇怪。良好的关闭。我注意到的唯一其他问题是我记得如果已经在全屏状态下尝试进入全屏时出现错误，反之亦然 - 最后一个问题是您如何处理作为全屏对象传递的任何元素。有时全屏视图不是整个页面（body 或 html），而是页面的一部分（div 容器）。
在错误中，如果您指定要切换到哪种模式，它假定您知道您是否处于全屏模式（您可以通过不带参数调用它来查找）。您也可以使用 null arg 调用它，以从一种模式切换到另一种模式，而不管当前状态如何。我没有想过需要将元素作为参数（不仅仅是假设它应该应用于身体）。那是个很好的观点。干杯。

【解决方案4】：

Krang 的回答很棒，Carl 模块化的想法也很棒。但我不能轻易理解他的代码。所以这是我在 TypeScript 中的版本：

function isInFullScreen() {
  const document: any = window.document;
  return (document.fullscreenElement && document.fullscreenElement !== null) ||
        (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
        (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
        (document.msFullscreenElement && document.msFullscreenElement !== null);
}

function requestFullScreen(elem: any) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullScreen) {
    elem.webkitRequestFullScreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  } else {
    console.warn("Did not find a requestFullScreen method on this element", elem);
  }
}

function exitFullScreen() {
  const document: any = window.document;
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

function toggleFullScreen(elem: any) {
  // based on https://stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript
  if (isInFullScreen()) {
    exitFullScreen();
  } else {
    requestFullScreen(elem || document.body);
  }
}

【讨论】：

我喜欢你的回答，但为什么要打字？这是一个真实的例子，我们可以看到为什么打字稿在这种情况下是无用的。添加 type : any 有什么意义？到头来就像 js :D
你是对的。我正在使用打字稿，所以我复制粘贴了我测试的最终结果。我可以添加更好的类型而不是那些 any 并且我可以提供一个 js 解决方案，但它对我来说是更多我当时不需要的工作。

【解决方案5】：

截至 2020 年 1 月，在稍微不同的情况下，我想在视频标签上切换全屏模式，接受的解决方案不适用于 Safari 和 iOS Safari。在这些平台上，可用的 API 是 webkitEnterFullScreen 和 webkitExitFullscreen，两者都应该在 HTML 元素上调用。因此，在我的情况下，具有特定于平台的回退的完整代码是：

// Request full screen
const requestVideoFullScreen = videoElt.requestFullscreen || videoElt.webkitEnterFullScreen || videoElt.mozRequestFullScreen || videoElt.msRequestFullScreen;
if (requestVideoFullScreen) {
    requestVideoFullScreen.call(videoElt);
}
...
// Exit full screen
if (videoElt.webkitExitFullscreen) {
    videoElt.webkitExitFullscreen();
} else {
    const cancelVideoFullScreen = document.exitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
    if (cancelVideoFullScreen) {
        cancelVideoFullScreen.call(document);
    }
}

此外，要使用与全屏相关的事件，我必须在 iOS Safari 上听“webkitbeginfullscreen”和“webkitendfullscreen”事件，在 macOS Safari 上听“webkitfullscreenchange”，如 this other SO answer 中所述。

【讨论】：

在接受的解决方案中，您将元素对象放置在 var docElm = document.documentElement; 的位置 - 例如 document.videoElt 。如果您注意到上面的代码在该行指定的对象上调用了退出/进入全屏。
抱歉，我刚刚意识到我的用例与您的原始帖子略有不同，因为我只是想在全屏模式下切换视频标签，而不是整个文档（在这种情况下是 webkitRequestFullscreen API不起作用）。我刚刚编辑了我的答案以澄清这一点。
是的，任何元素都可以设置为全屏元素，但是您需要在文档库之外调用“退出”全屏方法。抱歉，自从我解决这个问题以来已经很久了，只要你指定了元素，我的代码块就应该让你明白这一点。你使用 .call() 很不错。

【解决方案6】：

在下一节中将 docElem 替换为 document，这样就可以了

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

【讨论】：