Switch the website to full-screen mode using the button
I am trying to achieve two goals on my website:
1. A button that switches to full screen mode.
2. When switching between pages, the full screen mode will remain.
I was able to achieve two goals separately, but not together.
The situation right now:
1.the button switches to full screen mode with this code:
<script>
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
</script>
<li class="quicklinks"> <a href="#" class="layout-condensed-fullwidth" id="layout-condensed-width" >
<div onclick="toggleFullScreen();" class="iconset top-menu-fullpage-dark"></div>
</a> </li>
But , when switching pages, the full screen mode ends!
-
When switching to full screen mode by pressing F11 (and not as described above), I was able to make the full screen permanent with this code:
<script> function fullscreen(){ $('a').click(function() { if(!$(this).hasClass('noeffect')) { window.location = $(this).attr('href'); return false; } }); $(document).ready(function() { fullscreen(); }); </script>
But I couldn't find a way to combine the two. The code in section 2 is effective only when you press F11. Any ideas as to why this is happening and what might help solve this problem?
Thank!
source to share
According to MDN, using full screen mode , navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab), and in full screen mode, in full screen mode.
However, there is a trick / hack I saw on screenfull Full Screen API to describe a workaround. It uses an iframe to switch pages in full screen mode. Maybe you can use this wrapper or look for inspiration in code. See Demo.
Here's a snippet of code :
// a little hack to be able to switch pages while in fullscreen.
// we basically just creates a seamless iframe and navigate in that instead.
$('#iframe').click(function () {
// We create an iframe and fill the window with it
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';
})
Maybe instead of changing window.location
you can change iframe.src
to link href
.
source to share