JavaScript網頁全屏API

在大多數的瀏覽器中都有實現網頁全屏顯示的功能，而且大部分瀏覽器實現全屏顯示和退出全屏顯示的快捷鍵一般是F11和Esc兩個按鍵。現在，W3C已經制定了關於網頁全屏顯示的API，利用這個API 能夠實現網頁的全屏顯示，而且還能將某個特定的元素設置爲全屏顯示，在各瀏覽器的兼容性：google chrome 15 +, safri5.1+,firfox10+,IE11都已經開始支持全屏API。

進入全屏和退出全屏的方法：

進入全屏：element.requestFullscreen()

退出全屏：document.exitFullscreen()

固然這是W3C標準中的使用方法，在各瀏覽器使用中有所不一樣。

在webkit瀏覽器中：

進入全屏：element.webkitRequestFullScreen()
退出全屏：document.webkitCancelFullScreen()

在Gecko (Firefox)瀏覽器中：

進入全屏：element.mozRequestFullScreen()
退出全屏：document.mozCancelFullScreen()

雖然W3C制定了全屏API的標準，但在各瀏覽器中都沒有很好的支持這個標準，所以在使用中還要進行必要的兼容性處理過程。

 

兼容性封裝：

//進入全屏
function rfs() { var de = document.documentElement; if(de.requestFullscreen) { de.requestFullscreen(); } if(de.mozRequestFullScreen) { de.mozRequestFullScreen(); } if(de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); } }; //退出全屏
function efs() { var d = document; if(d.exitFullscreen) { d.exitFullscreen(); } if(d.mozCancelFullScreen) { d.mozCancelFullScreen(); } if(d.webkitCancelFullScreen) { d.webkitCancelFullScreen(); } };

 

本人是在無心中發現的這個API，尚未真正的在項目中使用過，沒法給出使用建議。所以在這裏引用博客文章——html5實現全屏的api方法中的使用心得：

1）在safari和chrome下，全屏後的元素全自動全屏居中，且背景色變爲黑色。我嘗試過經過給body設背景色來改變下背景色的顏色，失敗。在firefox下，全屏後的背景色爲全屏那個元素的背景色，且元素並不居中。若是給body調全屏，在webkit內核的瀏覽器下和按11進入的全屏效果差得很遠，主要是背景色問題，而firefox下則效果接近於f11全屏——固然仍是有區別，好比進入全屏的動畫過程就不相同。

2）退出全屏是經過給document來調來cancelFullScreen方法，但若是想讓頁面全部元素所有進入全屏的話，不能給document調requestFullScreen，只能給body調。

3）onFullScreenChange事件的回調，在safari裏不能寫alert，若是寫alert，點擊後會自動退出全屏。

4）按f11進入的全屏，onFullScreenChange事件不會響應。

5）進入全屏必定要點擊某個節點，不能直接調進入全屏api。mouseover、mousemove等接近onload的事件也不行。click、mousedown、mouseup事件能夠。策略應該同window.open應該是同樣的。

6）ios暫不支持全屏api。

 

文章最後提供一個演示demo: http://robnyman.github.io/fullscreen/