跨瀏覽器全屏模式

Question

在我的應用程序中，我希望用戶能夠按下按鈕或F11來全屏顯示。然而，瀏覽器調用全屏應該通過我的自定義函數，因爲有額外的代碼重新計算一些變量。

更新的代碼&鏈接表明瀏覽器忽略我們的包裝功能&立即使用F11按鈕調用其自己的全屏功能。

大衛沃爾什有一個介紹，但我似乎無法把它從我們的自定義功能位。

演示適用於Chrome而不是Firefox的...

David Walsh article on Full screen API

 document.addEventListener('keydown', keyInput, false); 
     var fullscreen_flag = false; 

     function keyInput(event) { 
      event.preventDefault(); 
      console.log('user press key'); 
      var code = event.keyCode || event.which; 
      if (code === 122) { // F11 pressed            
       requestFullScreen('key request'); 
      } 
     } 

     function requestFullScreen(text) { 

      if (fullscreen_flag) {     
       exitFullscreen(text);      
      } 

      else {     
       triggerFullScreen(text);      
      } 
     } 

     function triggerFullScreen(text){ 
      fullscreen_flag=true; 
      //alert('Fullscreen Enabled!'); 
      console.log(text); 
      var elementDom = document.getElementsByTagName('body')[0]; 
     elementDom.requestFullscreen = elementDom.requestFullscreen || 
     elementDom.mozRequestFullScreen || elementDom.webkitRequestFullscreen || 
     elementDom.msRequestFullscreen; 

     elementDom.requestFullscreen(); 
     } 

     function exitFullscreen(text) { 
      console.log(text); 
      fullscreen_flag = false; 
      //alert('Exiting Fullsreen!'); 
      document.exitFullscreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen; 

     document.exitFullscreen(); 

     } 

Answer 1

現在，它應該工作。

<div onclick="exitFullScreen()" style='cursor: pointer'>Exit Full Screen</div> 
<div onclick="triggerFullScreen()" style='cursor: pointer'>Enter Full Screen</div> 

---

 document.addEventListener('keydown', keyInput, false); 
     var fullscreen_flag = false; 
     function keyInput(event) { 
      var code = event.keyCode || event.which; 
      if (code === 122) { // F11 pressed        
       event.preventDefault(); 
       requestFullScreen(); 
      } 
     } 

     function requestFullScreen {     

      if (fullscreen_flag) {     
       exitFullscreen(); 
      } 

      else {     
       triggerFullScreen(); 
       fullscreen_flag = true; 
      } 
     } 

     document.triggerFullScreen=function(){ 
      alert('Fullscreen Enabled!'); 
      var elementDom = document.getElementsByTagName('body')[0]; 
      elementDom.requestFullscreen = elementDom.requestFullscreen || 
      elementDom.mozRequestFullScreen || elementDom.webkitRequestFullscreen || 
      elementDom.msRequestFullscreen; 

      elementDom.requestFullscreen(); 

     } 

     document.exitFullScreen=function() { 
      alert('Exiting Fullsreen!'); 
      document.exitFullscreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen; 

      document.exitFullscreen(); 

     }