HTML 5全屏幕網站在內部鏈接上退出全屏模式

我正在使用HTML 5構建網站，並希望擁有全屏選項。我已經使用下面的代碼工作，但是當你點擊一個內部鏈接時，它將退出全屏模式。這是相當不可取的。我已經廣泛搜索並沒有看到這個問題的任何答案，只涉及與iOS的webapps有關的問題，但事實並非如此。演示網站在這裏：http://kvrm.co.uk/jw/HTML 5全屏幕網站在內部鏈接上退出全屏模式

我也注意到，當在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); 
}

}）（）;

來源

2012-10-11 mrkevin

請問您的用戶將瀏覽器強制進入全屏模式有什麼好處？除了特定的需求，這是違反了一些非常基本的可用性原則。（所以你可能只是跳過箍環，以減少用戶的體驗。） –

用戶不是被迫使用全屏模式，它只是一個選項 - 要進入全屏，你必須點擊一個鏈接，說「全屏」。我個人從不使用全屏，也不喜歡它的想法，但我的客戶似乎認爲它很棒，並且對上述問題不滿意。如果它取決於我，我會完全消除它... – mrkevin

是的，這很難。試圖教育客戶可能是這項工作中最難的部分。按小時收費！ –

使用iframe。外部頁面僅包含切換全屏按鈕和填充屏幕其餘部分幷包含真實內容的大型iframe。您的佈局在切換按鈕的左側已經有一個明確的空間，所以您甚至不必更改佈局。

在iframe中導航，即使是在其他域中，也不會在外框上打破全屏模式。

您需要小心尺寸調整iframe，使外框上沒有滾動條。

來源

2012-10-13 05:39:04 Vroo

謝謝，我寧願不使用iframe，因爲各種原因。我想我會說服客戶取消全屏選項。 – mrkevin

HTML 5全屏幕網站在內部鏈接上退出全屏模式

回答

相關問題