2

我正在使用 HTML 5 构建一个站点，并希望有一个全屏选项。我已经使用下面的代码让它工作了，但是当你点击一个内部链接时，它会退出全屏模式。这是相当不可取的。我进行了广泛的搜索，但没有看到这个问题的任何答案，只有与 iOS 的 webapps 相关的问题，但事实并非如此。演示站点在这里： http: //kvrm.co.uk/jw/

我还注意到，当在 Firefox 中全屏显示时，屏幕底部会出现一条黑带，这在 Chrome 或 Safari 中不会发生。

在导航到其他内部页面时，如何使网站保持全屏模式？（另外，可以对 Firefox 中的黑条做些什么吗？）

这是全屏代码：

(function () {
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
    viewFullScreen.addEventListener("click", function () {
        var docElm = document.documentElement;
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }
        else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }
        else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }
    }, false);
}

var cancelFullScreen = document.getElementById("cancel-fullscreen");
if (cancelFullScreen) {
    cancelFullScreen.addEventListener("click", function () {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }, false);
}


var fullscreenState = document.getElementById("fullscreen-state");
if (fullscreenState) {
    document.addEventListener("fullscreenchange", function () {
        fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
    }, false);

    document.addEventListener("mozfullscreenchange", function () {
        fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
    }, false);

    document.addEventListener("webkitfullscreenchange", function () {
        fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
    }, false);
}

var marioVideo = document.getElementById("mario-video")
    videoFullscreen = document.getElementById("video-fullscreen");

if (marioVideo && videoFullscreen) {
    videoFullscreen.addEventListener("click", function (evt) {
        if (marioVideo.requestFullscreen) {
            marioVideo.requestFullscreen();
        }
        else if (marioVideo.mozRequestFullScreen) {
            marioVideo.mozRequestFullScreen();
        }
        else if (marioVideo.webkitRequestFullScreen) {
            marioVideo.webkitRequestFullScreen();
            /*
                *Kept here for reference: keyboard support in full screen
                * marioVideo.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
            */
        }
    }, false);
}

})();

4

1 回答 1

0

使用 iframe。外部页面仅包含切换全屏按钮和一个填充屏幕其余部分并包含您的真实内容的大 iframe。您的布局在切换按钮的左侧已经有一个空白空间，因此您甚至不必更改布局。

iframe 内的导航，即使是到其他域，也不会破坏外框的全屏模式。

您需要小心调整 iframe 的大小，以便外框上没有滚动条。

于 2012-10-13T05:39:04.243 回答