介绍HTML5中的全屏API

   在HTML5中,W3C制定了关于全屏的API,也就是用户可以比如一点某个键,
就可以实现全屏幕的效果,去掉工具栏等,但可惜这个目前只有google chrome 15 ,
safri(5.1开始),firfox(10开始)支持.先来看代码:

var docElm = document.documentElement;
if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
}

在WC3中,所有的fullscreen的API的方法用的都是小写,但各大浏览器中,可以
从上面的代码中看到,用的都是大写.
  如果要不使用 全屏的功能,退出的话,只需要如下代码这样即可:

if (document.exitFullscreen) {
    document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

  同时,可以在事件中对fullscreen进行状态的检测,比如:

  document.addEventListener("fullscreenchange", function () {
    fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);

document.addEventListener("mozfullscreenchange", function () {
    fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);

   我们还可以在FULLSCREEN时对样式进行设置,比如:

html:-moz-full-screen {
    background: red;
}

html:-webkit-full-screen {
    background: red;
}

html:fullscreen {
    background: red;
}

  在chrome中,当全屏幕模式时,还可以使用一些键的输入可能被禁止掉,但chrome
中可以重新设置请求,比如:
docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
即可.
一个FULLSCREEN的例子:
http://robnyman.github.com/fullscreen/