Javascript 전체 화면이 JSFiddle에서 작동하지 않습니다.

JSFiddle에서 전체 화면 토글 (Javascript)을 테스트 중이며 작동하지 않습니다. Chrome을 사용 중입니다. 토글 전체 화면이 작동하지 않는 이유Javascript 전체 화면이 JSFiddle에서 작동하지 않습니다.

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

사람이 알고 있나요 : 여기

내 샘플 JSFiddle입니까?

$('#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을 속성을 통해 허용 될 필요가있다. 이는 예컨대 타사의 내용은 그 전체 화면 작품을 볼 수 있습니다,이 코드를 사용하여 파일을 만들 경우

". 명시 적 허가없이 전체 화면을 이동 한 다음 크롬에서 엽니 다.

<!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에서 작동하지 않습니다.

답변

관련 문제