1つのボタンでフルスクリーンAPIを切り替えます

Question

私はフルスクリーンAPIを1つのボタンのクリックに作用させ、別のボタンのクリックでフルスクリーンを終了させます。私はフルスクリーントグルを1つのボタンで開いたり閉じたりしたいと思っています。

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> 

Answer 1

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'); 
    } 
}); 

Answer 2

その他は右のように、あなたがキャンセルしなければならないweither検出するために、ブールのいくつかの並べ替えを必要とするか、フルスクリーンを要求しています。

ただし、ユーザーがボタンを使用せずに全画面モードをキャンセルできることは考慮されていません。

すでに全画面表示されているかどうかを確認するブラウザ間の唯一の方法は、document.fullcreenElementを確認することです。 nullでない場合は、すでにフルスクリーンで表示されており、終了する必要があります。

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