html5實現全屏的api方法

參考地址

【進入和退出全屏】

// Webkit (works in Safari5.1 and Chrome 15)

element.webkitRequestFullScreen();

document.webkitCancelFullScreen();

 

// Firefox 10

element.mozRequestFullScreen();

document.mozCancelFullScreen();

 

// W3C 提議

element.requestFullscreen();

document.exitFullscreen();

 

【事件監聽】

 

// Webkit-base: element.onwebkitfullscreenchange

// Firefox: element.onmozfullscreenchange

 

// W3C Method:

element.addEventListener(‘fullscreenchange’, function(e) {

if (document.fullScreen) {                     // document.webkitIsFullScreen

/* make it look good for fullscreen */

} else {

/* return to the normal state in page */

}

}, true);

 

【css偽類】

:fullscreen – 當前全屏化的元素

:fullscreen-ancestor – 所有全屏化元素的祖先元素

 

【標籤屬性】

 

<iframe width=”640″ height=”360″ src=”” allowfullscreen=””></iframe>

 

 

=============================================================================

全屏並非簡單地去掉瀏覽器位址列和狀態列而已，它和按f11進入全屏有不少區別。一點心得：

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。