如何使用Javascript退出全屏onclick？

Question

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

问题是,我希望这是一个切换; 不只是进入全屏模式,而是在用户全屏时退出.它完全进入全屏模式,并执行退出全屏代码(因为显示的alert()框在退出代码之后但仅在退出代码条件内运行)但它什么都不做.

我已经在这里阅读了这里,这里似乎我正在做的一切都是正确的,但缺少一些东西.你能帮忙搞清楚如何使这个程序代码工作.

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()警报代码的位置,根据这个问题接受的答案仍然没有影响

Answer 1

弄清楚了.

显然,要进入全屏,您需要使用元素,但要退出全屏,您使用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>

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