Fullscreen Mode exiting

Question

I have the following anchor tag:

<a href="#" onclick="launchFullscreen(document.documentElement);">Full-screen</a>

Which uses the following lines of code that I've gathered from a tutorial:

<script>
    // Find the right method, call on correct element
    function launchFullscreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        }
        else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        }
        else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        }
        else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }

    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
        else if (element.msExitFullscreen) {
            element.msExitFullscreen();
        }
    }

    function dumpFullscreen() {
        console.log("document.fullscreenElement is: ", document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
        console.log("document.fullscreenEnabled is: ", document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled);
    }
    // Events
    document.addEventListener("fullscreenchange", function (e) {
        console.log("fullscreenchange event! ", e);
    });
    document.addEventListener("mozfullscreenchange", function (e) {
        console.log("mozfullscreenchange event! ", e);
    });
    document.addEventListener("webkitfullscreenchange", function (e) {
        console.log("webkitfullscreenchange event! ", e);
    });
    document.addEventListener("msfullscreenchange", function (e) {
        console.log("msfullscreenchange event! ", e);
    });
    // Add different events for full-screen
</script>

This works perfectly fine to enter full-screen mode, however when the user leaves the page (by clicking a link), it will exit full-screen mode.

Is there a way that I can make the website stay in the full-screen mode once the anchor tag is clicked, and then only exit this mode only when the ESC button or Full-screen hyperlink is pushed again?

Answer 1

Whenever the URL changes, full screen mode is canceled. The only non-hack-y way can prevent this by happening is by using a SPA, Single Page Application, library which manages state by using the fragment url (#fragment) to circumvent this issue. Here are some good ones:

• pagerjs
• routie
• crossroads

If you want to go all out you can use an MVC framework which supports fragment routing:

• Angular
• Backbone