使用單個按鈕切換全屏API

我擁有全屏API，只需點擊一個按鈕，然後按一下另一個按鈕即可退出全屏。我希望通過單個按鈕打開和關閉全屏切換。使用單個按鈕切換全屏API

var requestFullscreen = function(ele) { 
    if (ele.requestFullscreen) { 
     ele.requestFullscreen(); 
    } else if (ele.webkitRequestFullscreen) { 
     ele.webkitRequestFullscreen(); 
    } else if (ele.mozRequestFullScreen) { 
     ele.mozRequestFullScreen(); 
    } else if (ele.msRequestFullscreen) { 
     ele.msRequestFullscreen(); 
    } else { 
     console.log('Fullscreen API is not supported.'); 
    } 
}; 

var exitFullscreen = function() { 
    if (document.exitFullscreen) { 
     document.exitFullscreen(); 
    } else if (document.webkitExitFullscreen) { 
     document.webkitExitFullscreen(); 
    } else if (document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); 
    } else if (document.msExitFullscreen) { 
     document.msExitFullscreen(); 
    } else { 
     console.log('Fullscreen API is not supported.'); 
    } 
}; 

var fsDocButton = document.getElementById('fs-doc-button'); 
var fsExitDocButton = document.getElementById('fs-exit-doc-button'); 

fsDocButton.addEventListener('click', function(e) { 
    e.preventDefault(); 
    requestFullscreen(document.documentElement); 
}); 

fsExitDocButton.addEventListener('click', function(e) { 
    e.preventDefault(); 
    exitFullscreen(); 
});

<button id="fs-doc-button">FULLSCREEN</button> 
<button id="fs-exit-doc-button">EXIT FULLSCREEN</button>

來源

2016-06-13 MrThunder

您可以打開和關閉使用布爾全屏的狀態。 –

As Arnaud Gueras said，use a boolean'var fullscreen_status = false;'並在您的事件監聽器 – DaTebe

var fsDocButton = $('#fs-doc-button'); 
fsDocButton.data('toggleState', 'first'); 

fsDocButton.on('click', function(e) { 
    e.preventDefault(); 
    if ($(this).data('toggleState') == 'first'){ 
     requestFullscreen(document.documentElement); 
     $(this).data('toggleState', 'second'); 
    } 
    else{ 
     exitFullscreen(); 
     $(this).data('toggleState', 'first'); 
    } 
}); 

$(document).keydown(function(e){ 
    if (e.keyCode == 27){ 
     $('#fs-doc-button').data('toggleState', 'second'); 
    } 
});

來源

2016-06-13 11:45:56

中檢查/切換它，以及如果用戶按[esc]取消全屏，該怎麼辦？ – Kaiido

對，需要附加一個聽衆'fullscreenchange'事件 –

不是*必需的*但是一種處理方法是。 – Kaiido

其他人是正確的，你需要某種形式的布爾來檢測你應該取消weither或請求全屏。

但沒有考慮到您的用戶可能會取消全屏模式而不使用您的按鈕。

唯一的跨瀏覽器方式來檢查您是否已全屏已檢查document.fullcreenElement。如果非null，則您已經處於全屏狀態並應退出。

var isFullScreened = function(){ 
    return document.fullscreenElement || 
    document.mozFullScreenElement || 
    document.webkitFullscreenElement || 
    document.msFullscreenElement; 
}; 
... 
if(isFullScreened()){ 
    exitFs() 
} 
else{ 
    enterFS(); 
}

來源

2016-06-13 11:59:32 Kaiido

使用單個按鈕切換全屏API

回答

相關問題