html5 全屏api
【进入和退出全屏】
//Webkit(worksinSafari5.1andChrome15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
//Firefox10
element.mozRequestFullScreen();
document.mozCancelFullScreen();
//W3C提议
element.requestFullscreen();
document.exitFullscreen();
【事件监听】
//Webkit-base:element.onwebkitfullscreenchange
//Firefox:element.onmozfullscreenchange
//W3CMethod:
element.addEventListener('fullscreenchange',function(e){
if(document.fullScreen){//document.webkitIsFullScreen
/*makeitlookgoodforfullscreen*/
}else{
/*returntothenormalstateinpage*/
}
},true);
【css伪类】
:fullscreen–当前全屏化的元素
:fullscreen-ancestor–所有全屏化元素的祖先元素
【标签属性】
<iframewidth="640"height="360"src="http://anothersite.com/video/123"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。
相关推荐
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...