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

每当网址更改时，全屏模式都会被取消。唯一的非黑客方式可以通过使用SPA， S ingle P age A 应用程序，管理的库来防止这种情况发生通过使用片段URL（#fragment）来规避此问题。这里有一些好的：

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

全屏模式退出

1 个答案: