HTML 5全屏幕网站在内部链接上退出全屏模式 [英] HTML 5 full screen site exits full screen mode on internal links

问题描述

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

我也注意到，当在Firefox中进行全屏时，屏幕底部会出现一条黑色条纹，这在Chrome或Safari中不会发生。

如何在浏览其他内部网页时让网站保持全屏模式？ （另外，Firefox中的黑条可以做些什么吗？）

以下是全屏代码：

<$ （viewFullScreen）{
viewFullScreen.addEventListener（）;
> （function（）{
var viewFullScreen = document.getElementById（view-fullscreen）; click，function（）{
var docElm = document.documentElement;
if（docElm.requestFullscreen）{
docElm.requestFullscreen（）;
}
else如果（docElm.mozRequestFullScreen）{
docElm.mozRequestFullScreen（）;
}
，否则如果（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（）;
}
，否则如果（marioVideo.mozRequestFullScreen）{
marioVideo.mozRequestFullScreen（）;
}
，否则如果（marioVideo.webkitRequestFullScreen）{
marioVideo.webkitRequestFullScreen（）;
/ *
*存放在这里以供参考：在全屏幕
* marioVideo.webkitRequestFullScreen（Element.ALLOW_KEYBOARD_INPUT）键盘支持;
* /
}
}，false）;
}


}）（）;

解决方案

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

在iframe中导航，甚至到其他域，不会在外框上打破全屏模式。

您需要小心尺寸化iframe，以免外框上有滚动条。

I'm building a site using HTML 5 and want to have a full screen option. I've got it working using the below code, however when you click an internal link it exits full screen mode. This is rather undesirable. I've searched extensively and haven't seen any answers to this question, only to questions relating to webapps for iOS, which this is not. Demo site is here: http://kvrm.co.uk/jw/

I've also noticed that when going fullscreen in Firefox a black band appears across the bottom of the screen, which does not happen in Chrome or Safari.

How can I keep the site in full screen mode while navigating to other internal pages? (Also, can anything be done about the black bar in Firefox?)

Here's the full screen code:

(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);
}

})();

解决方案

Use an iframe. The outer page contains only the toggle fullscreen button and a large iframe that fills the rest of the screen and contains your real content. Your layout already has a clear space to the left of the toggle button so you won't even have to change your layout.

Navigation within the iframe, even to other domains, won't break fullscreen mode on the outer frame.

You need to be careful sizing the iframe so there's no scrollbar on the outer frame.

这篇关于HTML 5全屏幕网站在内部链接上退出全屏模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！