我试图知道用户何时以全屏显示div或不以javascript全屏显示。该脚本可以在Chrome上正常运行（将全屏设置为div，显示警报，然后在全屏关闭时，再次显示警报），但不适用于Firefox。为什么呢
<!DOCTYPE html>
<head>
<meta content="text/html; Charset=UTF-8" http-equiv="Content-Type" />
<title>test fullscreenchange </title>
</head>
<body>
<div id="macarte" class="csscarte" style="color: green" >my div</div>
<button onclick="goFullscreen('macarte'); return false">showfullscreen</button>
<script type="text/javascript">
function fullscreenouinon() {alert("Full Screen Change !");};
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var thediv = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (thediv.requestFullScreen) {
//fonction officielle du w3c
thediv.addEventListener("fullscreenchange", function() {fullscreenouinon()}, false);
thediv.requestFullScreen();
} else if (thediv.webkitRequestFullScreen) {
//fonction pour Google Chrome (on lui passe un argument pour autoriser le plein écran lors d'une pression sur le clavier)
thediv.addEventListener("webkitfullscreenchange", function() {fullscreenouinon()}, false);
thediv.webkitRequestFullScreen(thediv.ALLOW_KEYBOARD_INPUT);
} else if (thediv.mozRequestFullScreen){
//fonction pour Firefox
thediv.addEventListener("mozfullscreenchange", function() {fullscreenouinon()}, false);
thediv.mozRequestFullScreen();
} else {
alert('Votre navigateur ne supporte pas le mode plein écran, il est temps de passer à un plus récent ;)');
}
};
</script>
</body></html>
最佳答案
“成功启用全屏模式后，包含该文档的文档会收到mozfullscreenchange事件。退出全屏模式时，文档会再次收到mozfullscreenchange事件。请注意，mozfullscreenchange事件本身并不提供任何信息，例如文档是进入还是退出全屏模式，但是如果文档具有非null mozFullScreenElement，则表示您处于全屏模式。”
从这里取-
https://developer.mozilla.org/en-US/docs/DOM/Using_full-screen_mode
因此，您应该将mozfullscreenchange事件的EventEventListener添加到document，而不是添加到元素（并检查非null mozFullScreenElement？）。