全屏模式退出

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按钮或全屏超链接时才退出此模式？

- user1752759

---

嗯，我的想法是你需要一个Active-X插件来维护它...而且大多数人不喜欢安装它。祝你好运！ - Nicholas Hazel

可能是一个iframe、AJAX或类似的东西，这样当你导航到另一页时，你的html元素实际上不会改变/刷新。 - Shomz

我认为像Shomz指出的那样，使用ajax会是最好的方法。 - Lu Roman

没有Ajax或者ActiveX/iframe的hack方法就是唯一的方式。http://www.html5rocks.com/en/mobile/fullscreen/#toc-keepuserin即使在您发布的演示中，一旦单击导航栏链接，您也会退出全屏模式。如果您有关于将静态网站转换为“ajax网站”的问题，请发布另一个带有示例代码或问题网站链接的问题。 - Will

可能是因为 href="#" 的原因... 请尝试将其删除或使用 div 替代锚点标签。 - Mr_Green

Answer 1

每当URL变化时，全屏模式就会取消。唯一的非黑客方式可以防止这种情况发生是使用单页面应用程序（SPA）库，该库通过使用片段URL（#fragment）来管理状态来避开此问题。以下是一些不错的库：

• pagerjs
• routie
• crossroads

如果您想尽情发挥，则可以使用支持片段路由的MVC框架：

• Angular
• Backbone

- 0xcaff