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/