전체 화면으로 웹 사이트를 표시하고 탐색하십시오.

Question

"전체 화면"모드로 웹 사이트를 표시하고 싶습니다. 이를 위해 내 웹 사이트에 다음 스크립트를 추가합니다 : https://github.com/sindresorhus/screenfull.js. 페이지를 "전체 화면"모드로 표시 할 수 있습니다.

전체 화면 모드를 활성화하는 버튼을 표시하기 위해 바닥 글을 업로드합니다. 잘 작동합니다. 그렇지 않으면

if (screenfull.enabled) { 
      // Display the button if the browser is compatible 
    $('.fullscreen').show(); 
} 

$('.fullscreen').toggle(function() { 
    screenfull.request(); 
}, function() { 
    screenfull.exit(); 
}); 

, 내가 (다른 페이지로 사용자를 리디렉션) 링크를 클릭하고있어, "전체 : 여기

<li><a href="#" class="fullscreen">Full screen</a><br /></li> 

내 JS입니다 : 여기

내 바닥 글입니다 화면 "모드가 취소됩니다. 어느 누구도 그것을 고치는 방법을 알고 있습니까?

웹 사이트를 "전체 화면"모드로 개발하고이 모드를 종료하지 않고도 탐색 할 수 있습니까? 나는 모든 자원을 가져갈거야.

덕분에 나는이 라이브러리의 무엇을보고에서

Answer 1

, 당신은 iframe에 당신이 사용자를 지시하는 페이지를 넣고 그 iframe을 표시해야합니다. 가리키는 라이브러리에는 외부 페이지를 전체 화면으로로드하는 방법의 샘플이 포함 된 샘플 페이지가 있습니다. 다음과 같이 코드는 다음과 같습니다

var iframe = document.createElement('iframe') 
iframe.setAttribute('id', 'external-iframe'); 
iframe.setAttribute('src', 'http://bbc.com'); 
iframe.setAttribute('frameborder', 'no'); 
iframe.style.position = 'absolute'; 
iframe.style.top = '0'; 
iframe.style.right = '0'; 
iframe.style.bottom = '0'; 
iframe.style.left = '0'; 
iframe.style.width = '100%'; 
iframe.style.height = '100%'; 
$('#container').prepend(iframe); 
document.body.style.overflow = 'hidden'; 

내가 http://sindresorhus.com/screenfull.js/에서 오른쪽 예에서이 코드를 당겼다.