原生全屏JavaScript API切換按鈕

Question

我無法弄清楚如何修改下面的代碼以包含切換按鈕。當處於「正常」模式時，該按鈕將使該元素進入全屏狀態，然後改變其功能以返回到「正常」狀態。

我從John Dyer's Native Fullscreen JavaScript API例如修改了代碼：

var fsButton = document.getElementById('fsbutton'), 
    fsElement = document.getElementById('specialstuff'), 
    fsStatus = document.getElementById('fsstatus'); 


if (window.fullScreenApi.supportsFullScreen) { 
    fsStatus.innerHTML = 'YES: Your browser supports FullScreen'; 
    fsStatus.className = 'fullScreenSupported'; 

    // handle button click 
    fsButton.addEventListener('click', function() { 
     window.fullScreenApi.requestFullScreen(fsElement); 
    }, true); 

    fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() { 
     if (fullScreenApi.isFullScreen()) { 
      fsStatus.innerHTML = 'Whoa, you went fullscreen'; 
     } else { 
      fsStatus.innerHTML = 'Back to normal'; 
     } 
    }, true); 

} else { 
    fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen'; 
} 

這樣：

var container = document.getElementById('canvas'), 
fsButton = document.getElementById('fsbutton'); 

if (window.fullScreenApi.supportsFullScreen) { // fullscreen supported 
    fsButton.style.display = 'block'; 

    container.addEventListener(fullScreenApi.fullScreenEventName, function() { 
     fsButton.addEventListener('click', function() { 
      if (fullScreenApi.isFullScreen()) { // fullscreen is on 
       window.fullScreenApi.CancelFullScreen(container); 
       fsButton.className = 'fs-off'; 
      } else { // fullscreen is off 
       window.fullScreenApi.requestFullScreen(container); 
       container.style.width = "100%"; 
       container.style.height = "100%"; 
       fsButton.className = 'fs-on'; 
      } 
     }, true) 

    }, true); 

} else { 
    // no fullscreen support - do nothing 
} 

但它不工作。任何建議非常感謝！

Answer 1

首先，您不應將fsButton click事件偵聽器嵌套到fullScreenApi的事件偵聽器中，因爲直到container變爲全屏後它纔會工作。 fsButton的click負責全屏顯示，正在附加事件監聽器之後正在全屏顯示，因此該操作永遠不會發生。

下面的代碼修改後的版本應該滿足您的需求：

var fsButton = document.getElementById('fsbutton'), 
    container = document.getElementById('canvas'); 


if (window.fullScreenApi.supportsFullScreen) { 
    fsButton.style.display = 'block'; 

    fsButton.addEventListener('click', function() { 
     if (fsButton.className == 'fs-off') { 
      window.fullScreenApi.requestFullScreen(container); 
     } else { 
      window.fullScreenApi.cancelFullScreen(container); 
     } 
    }, true); 

    container.addEventListener(fullScreenApi.fullScreenEventName, function() { 
     if (fullScreenApi.isFullScreen()) { 
      container.style.width = container.style.height = '100%'; 
      fsButton.className = 'fs-on'; 
     } else { 
      fsButton.className = 'fs-off'; 
     } 
    }, true); 
} else { 
    // no fullscreen support - do nothing 
} 

Answer 2

你就會有另外一個問題是，Mozilla希望你聽fullscreenchange事件document元素，而不是元素這是全屏。

// which object can handle a fullscreen event 
var fullscreenObj = (fullScreenApi.fullScreenEventName.indexOf('moz') > -1 : document : container; 

fullscreenObj.addEventListener(fullScreenApi.fullScreenEventName, function() { 
    if (fullScreenApi.isFullScreen()) { 
     container.style.width = container.style.height = '100%'; 
     fsButton.className = 'fs-on'; 
    } else { 
     fsButton.className = 'fs-off'; 
    } 
}, true); 

Answer 3

我建議使用類似https://github.com/sindresorhus/screenfull.js/

這包裝在一個簡潔的界面瀏覽器怪癖最多。