【進入和退出全屏】
// 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。