全屏模式退出

Question

我有以下锚标记:

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

这可以很好地进入全屏模式,但是当用户离开页面时(通过单击链接),它将退出全屏模式.

有没有办法让我的网站在点击锚标签后保持全屏模式,然后只有当再次按下ESC按钮或全屏超链接时才退出此模式？

Answer 1

每当 URL 更改时，全屏模式就会取消。唯一可以防止这种情况发生的非黑客方法是使用 SPA（单页应用程序）库，该库通过使用片段 url ( #fragment) 来管理状态来规避此问题。这里有一些好的：

• 分页器
• 路线
• 十字路口

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

• 角
• 骨干