Javascript全屏無法在JSFiddle中工作

我在JSFiddle中測試全屏切換（Javascript），它不工作。我正在使用Chrome。Javascript全屏無法在JSFiddle中工作

這裏是我的樣品的jsfiddle：

https://jsfiddle.net/richardcwc/99874pyx/

有誰知道爲什麼切換全屏不起作用？

$('#button').on('click',function() { 
 
\t if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) { 
 
\t \t alert('exit fullscreen'); 
 
\t \t if(document.exitFullscreen) { 
 
\t \t \t document.exitFullscreen(); 
 
\t \t } else if(document.msExitFullscreen) { 
 
\t \t \t document.msExitFullscreen(); 
 
\t \t } else if(document.mozCancelFullScreen) { 
 
\t \t \t document.mozCancelFullScreen(); 
 
\t \t } else if(document.webkitExitFullscreen) { 
 
\t \t \t document.webkitExitFullscreen(); 
 
\t \t } 
 
\t } else { 
 
\t \t alert('enter fullscreen'); 
 
\t \t if(document.documentElement.requestFullscreen) { 
 
\t \t \t document.documentElement.requestFullscreen(); 
 
\t \t } else if(document.documentElement.webkitRequestFullscreen) { 
 
\t \t \t document.documentElement.webkitRequestFullscreen(); 
 
\t \t } else if(document.documentElement.mozRequestFullScreen) { 
 
\t \t \t document.documentElement.mozRequestFullScreen(); 
 
\t \t } else if(document.documentElement.msRequestFullscreen) { 
 
\t \t \t document.documentElement.msRequestFullscreen(); 
 
\t \t } 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" id="button" value="test fullscreen toggle" />

來源

2016-06-28 Richard

可能的複製[全屏無法在jsfiddle中工作]（http://stackoverflow.com/questions/27984410/full-screen-does-not-work-in-jsfiddle） – abhishek

你的代碼工作。問題出在JSFiddle，它阻止了全屏工作。

具體而言，它不起作用，因爲JSFiddle在iframe中運行代碼。根據W3 spec：

要啓用以嵌套瀏覽上下文內容去全屏，它需要通過HTML IFRAME元素的屬性的allowFullScreen具體允許的。這防止了例如來自第三方的內容去全屏沒有明確的許可。」

如果您使用這個代碼的文件，然後在Chrome中打開它，你會看到全屏的作品。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> 
</head> 
<body> 
    <input type="button" id="button" value="test fullscreen toggle" /> 
</body> 

<script> 
$(document).ready(function() { 
    $('#button').on('click',function() { 
     if(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement) { //in fullscreen, so exit it 
      alert('exit fullscreen'); 
      if(document.exitFullscreen) { 
       document.exitFullscreen(); 
      } else if(document.msExitFullscreen) { 
       document.msExitFullscreen(); 
      } else if(document.mozCancelFullScreen) { 
       document.mozCancelFullScreen(); 
      } else if(document.webkitExitFullscreen) { 
       document.webkitExitFullscreen(); 
      } 
     } else { //not fullscreen, so enter it 
      alert('enter fullscreen'); 
      if(document.documentElement.requestFullscreen) { 
       document.documentElement.requestFullscreen(); 
      } else if(document.documentElement.webkitRequestFullscreen) { 
       document.documentElement.webkitRequestFullscreen(); 
      } else if(document.documentElement.mozRequestFullScreen) { 
       document.documentElement.mozRequestFullScreen(); 
      } else if(document.documentElement.msRequestFullscreen) { 
       document.documentElement.msRequestFullscreen(); 
      } 
     } 
    }); 
}) 
</script> 

</html>

來源

2016-06-29 00:17:28 asemahle

Javascript全屏無法在JSFiddle中工作

回答

相關問題