Switching website into persistent full screen mode with a button

Question

I am trying to achieve two goals on my website:
1. A button that switches to full screen mode.
2. When passing between pages the full screen mode will remain.

I was able to achieve the two goals seperately but not together.
The situation right now is:
1. the button switches to full screen mode using 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 quits!

When switching to full screen mode via clicking on F11 (and not as described above) I was able to make the full screen persistent 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 could not find a way to combine those two. The code in section 2 has effect only if you press F11. Any ideas on why it happens and what can help solve this issue?

Thanks!

Hi, maybe these answers work for you: http://stackoverflow.com/questions/19355370/how-to-open-a-web-page-automatically-in-full-screen-mode and http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen — Mohammad Kermani, Sep 27 '14 at 11:20
thanks, but I viewed this soltuions and tried what's relevant. Ended up in the situation I described. — tomermes, Sep 27 '14 at 11:25
_“When passing between pages the full screen mode will remain”_ – it is explicitly specified that this is _not_ supposed to happen. When the user navigates away from content opened in fullscreen using the Fullscreen API, then exiting fullscreen mode is the expected behavior. — CBroe, Sep 27 '14 at 11:43
I understand is the given situation, I'm searching for an alternative. — tomermes, Sep 27 '14 at 12:01

dreyescat · Accepted Answer · 2014-09-27T14:30:54.650

According to MDN - Using fullscreen mode navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab) while in fullscreen mode exits fullscreen mode.

However, there is a trick/hack I have seen in screenfull Fullscreen API wrapper to sort of workaround this issue. It uses an iframe to be able to switch pages while in fullscreen. Maybe you can use this wrapper or look for inspiration in the code. See the demo.

Here it is the code fragment:

        // 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 the window.location you could change the iframe.src to the link href.

tried this, doesn't work, FF and Edge will exit fullscreen even if you change iframe src and don't touch location.href — Starwave, Dec 11 '17 at 10:14

Switching website into persistent full screen mode with a button

1 Answers1