2012-09-05 22 views
0

我試圖知道用戶在全屏幕中顯示div或不在javascript中使用fullscreenchange。此腳本適用於Chrome(設置全屏div,顯示提示,然後當關閉全屏時,再次顯示提醒),但不適用於Firefox。爲什麼?firefox上的javascript mozfullscreenchange

<!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> 

回答

1

「當全屏模式成功經營,它包含了文檔的文檔接收mozfullscreenchange事件。當全屏模式退出,該文件再次收到mozfullscreenchange。要注意的是,mozfullscreenchange事件沒有按本身並不提供有關文檔是否進入或退出全屏模式的任何信息,但如果文檔具有非空mozFullScreenElement,則表明您處於全屏模式。「 從這裏拍攝 - https://developer.mozilla.org/en-US/docs/DOM/Using_full-screen_mode

所以,你應該的addEventListener爲mozfullscreenchange事件document,不是元素(和檢查非nullmozFullScreenElement?)。