当前位置:   article > 正文

html5全屏api

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="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。

转载于:https://www.cnblogs.com/cly84920/archive/2012/03/22/4426539.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/145349?site
推荐阅读
相关标签
  

闽ICP备14008679号