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 に答える