Question

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

我还尝试根据this questions accepted answer添加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）等

Answer 2

更通用的帮助程序（从接受的答案派生）...

获取模式

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

设置模式

可以通过bool调用该函数来显式设置当前模式，其中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();
        }
    };

}();

Answer 3

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

Answer 4

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

全屏显示：

  /* 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 全屏模式。

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

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

如何使用Javascript退出全屏onclick？

5 个答案:

获取模式

设置模式

切换模式