如何使用JavaScript退出全屏onclick? [英] How to exit fullscreen onclick using Javascript?

问题描述

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

Not sure if the following code snip will work embedded on SO, as it didn't work when pasting it, however it does work stand-alone.

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

The problem, is I want this to be a toggle; not just to enter fullscreen mode, but to exit it if the user is in fullscreen. It goes into fullscreen mode perfectly, and executes the exit fullscreen code (as the alert() box is shown which runs after the exit code but inside the exit code condition only) yet it does nothing.

我已在此处和此处，看来我所做的一切都正确，但是缺少了一些东西.您能帮忙弄清楚如何使此程序代码起作用.

I have read up on this here, and here which seems that I am doing everything correct, but something is missing. Could you please assist in figuring out how to make this procedural code work.

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');
	}
}

<a onclick="fullscreen()" href="javascript:void(0);">Toggle FullScreen</a>

根据此问题，我还尝试在警报代码所在的位置添加parent.exitfs()接受的答案，但仍然没有影响

I also tried adding parent.exitfs() where the alert code is, according to this questions accepted answer and still has no impact

推荐答案

弄清楚了.

显然，要进入全屏模式，您需要使用元素，但是要退出全屏模式，请使用document.

Apparently, to enter full screen, you need to use the Element, however to exit fullscreen, you use document.

这是完整的javascript功能，可以切换全屏显示！！！

Here is the complete javascript function to toggle fullscreen that works !!!

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();
        }
    }
}

还有一个简单的用法说明:

And a simple case on how to use it :

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

您需要确保这是用户在页面上执行操作时调用的一种简短方法.从文档中可以看出，此功能是否需要更高的访问模式，因此，您(此时)不能(在此时)自动强制全屏显示页面加载或异步事件(除非它们是来自用户的操作，例如Click)等.

You need to make sure that this is a short method called when the user does an action on the page. From what the documentation says, is this is a feature that requires a higher access mode, and thus you can not (at this time) automatically force fullscreen on things like when the page has loaded, or async events (unless they are events from a users action like Click), etc.

这篇关于如何使用JavaScript退出全屏onclick?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！