0

我试图知道用户何时全屏显示 div 或不使用fullscreenchangeJavascript。该脚本适用于 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>
4

1 回答 1

2

"When full-screen mode is successfully engaged, the document which contains the document receives a mozfullscreenchange event. When full-screen mode is exited, the document again receives a mozfullscreenchange event. Note that the mozfullscreenchange event doesn't provide any information itself as to whether the document is entering or exiting full-screen mode, but if the document has a non null mozFullScreenElement, you know you're in full-screen mode." Taken from here - https://developer.mozilla.org/en-US/docs/DOM/Using_full-screen_mode

So, you should addEventListener for the mozfullscreenchange event to document, not to the element (and check for a non null mozFullScreenElement?).

于 2012-09-05T20:15:50.023 回答