javascript - 全屏模式退出

Question

我有以下 anchor 标签:

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

它使用了我从教程中收集的以下代码行:

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

这对于进入全屏模式非常有效，但是当用户离开页面(通过单击链接)时，它将退出全屏模式。

有什么方法可以让网站在点击 anchor 标签后保持全屏模式，然后只有在再次按下 ESC 按钮或全屏超链接时才退出此模式？

Answer 1

只要 URL 发生变化，全屏模式就会被取消。唯一可以防止这种情况发生的非 hack-y 方法是使用 SPA，Single Page Aapplication，library which manages通过使用片段 url (#fragment) 来规避此问题。这里有一些不错的:

• pagerjs
• routie
• crossroads

如果你想全力以赴，你可以使用支持片段路由的 MVC 框架:

• Angular
• Backbone