如果你想使一個元素在全屏模式下展現 (比如說 <video>)，你可以調用該元素的 requestFullscreen() 方法；這個方法在 Gecko 中的實現是 element.mozRequestFullScreen()，在 WebKit 中為 element.webkitRequestFullscreen()。
比如一個實例：
var elem = document.getElementById("myvideo");if (elem.requestFullscreen) { elem.requestFullscreen(); //IE瀏覽器} else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); //火狐瀏覽器} else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); //谷歌瀏覽器}運行到這里，Gecko 與 WebKit 兩個實現中出現了一個值得注意的區別：Gecko 會為元素自動添加 CSS 使其伸展以便鋪滿屏幕： "width: 100%; height: 100%"。 WebKit 則不會這么做；它會讓全屏的元素以原始尺寸居中到屏幕中央，其余部分變為黑色。為了在 WebKit 下也達到與 Gecko 同樣的全屏效果，你需要手動為元素增加 CSS 規則"width: 100%; height: 100%;"：
function toggleFullScreen() { if (!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } }}代碼首先檢查了 document 上的 fullscreenElement 屬性(也檢查了帶 -moz- 與 -webkit- 兩個前綴的)。如果該屬性為 null，則 document 當前處于窗口模式，所以我們需要切換進全屏模式。可以通過調用 element.mozRequestFullScreen() 或者 webkitRequestFullscreen()來進入全屏模式，具體調用哪個還要看哪個方法可用。
如果已經激活了全屏模式 (fullscreenElement 非空)，我們調用 document.mozCancelFullScreen() 或 webkitCancelFullScreen()，同樣要依賴于我們使用了哪個瀏覽器。
以上就是小編為大家帶來的淺談javascript控制HTML5的全屏操控,瀏覽器兼容的問題全部內容了，希望大家多多支持武林網~
新聞熱點
疑難解答
