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:

       function toggleFullScreen() {
           if (!document.fullscreenElement &&    // alternative standard method
               !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
             if (document.documentElement.requestFullscreen) {
             } else if (document.documentElement.msRequestFullscreen) {
             } else if (document.documentElement.mozRequestFullScreen) {
             } else if (document.documentElement.webkitRequestFullscreen) {
           } else {
             if (document.exitFullscreen) {
             } else if (document.msExitFullscreen) {
             } else if (document.mozCancelFullScreen) {
             } else if (document.webkitExitFullscreen) {

      <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!

  1. 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:

                function fullscreen(){
                $('a').click(function() {
                if(!$(this).hasClass('noeffect')) {
                    window.location = $(this).attr('href');
                    return false;
            $(document).ready(function() {

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?



source to share

1 answer

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%';
            document.body.style.overflow = 'hidden';


Maybe instead of changing window.location

you can change iframe.src

to link href




All Articles