大染志


一个程序员,正在学习和体验创业,热爱互联网,喜欢尝试新鲜事物,同时还喜欢拍照和旅游。


HTML5 全屏(full screen)API

full screen (全屏)API,现在已经成为了HTML5的一个官方API,不过目前只是被chrome、firefox、safari浏览器实现了,且他们目前都是用的自行实现的函数,而非W3C官方标准的函数。建议在调用之前都检测一下!

full screen API主要有两个方法:一是执行全屏,另外一个则是退出全屏。他们的调用方法为:

执行全屏

var element =  XXX      //这里你需要得到你的一个网页中的对象,可以是整个网页,或者其中一个节点

element.requestFullscreen();     //W3C的方法

element.mozRequestFullScreen();     //firefox实现的方法

element.webkitRequestFullScreen();     //chrome 和safari实现的方法

退出全屏

element.exitFullScreen();     //W3C

element.mozCancelFullScreen();     //firefox

element.webkitCancelFullScreen();  //chrome和safari

例如,我想全屏整个页面,那个就应该使用:

var documentEle = document.documentElement;

documentEle.webkitRequestFullScreen(); //chrome

此外我们还可以监听,full screen 事件,在其状态改变时执行相关操作。

document.addEventListener("fullscreenchange", function () {}, false);  //w3c

document.addEventListener("mozfullscreenchange",function(){},false); //firefox

document.addEventListener("webkitfullscreenchange", function () {}, false);  //chrome 和safari

如果我们想获取当前某个对象数否处于全屏状态,就可以使用下面这个属性:

document.fullScreen  //w3c

document.mozFullScreen //firefox

document.webkitIsFullScreen // chrome 和safari

经过我的测试(chrome 22),应该是HTML 里面所有对象都是可以被全屏的,如:

comments powered by Disqus