web 使网站在浏览器中全屏显示 fullscreen=yes

关于全屏（FullScreen）

　　很久以前，浏览器就已经有全屏的概念的了。IE的open方法中可以配置上FullScreen参数来让打开的页面全屏化。但是这不太好用，所以没成为主流。而且，全屏这东西如果被恶意使用会给用户造成困扰，所以在现代浏览的全屏API中需要在用户事件中调用。

　　open方法的第三个参数是可以对打开的窗口做一些配置，但是现代浏览器并没有吸收太多的这个部分，包括FullScreen这个配置。所以open的FullScreen依然只能在IE中使用。高版本IE中这个FullScreen也已经被弱化了，所以的全屏也只是最大化窗口而已。

open("index.html",null,"fullscreen=yes");

　　

注意它的值是yes或大于0的数字时才有效。传统的IE方法并没有对自身页面全屏化的接口（ActiveXObject除外），而HTML5的FullScreen API是针对viewport的，所以它可以对当前文档做全屏化。但是由于安全性的考虑（防止被恶意使用），这个API的调用需要在用户事件中。只有用户自己的操作才能触发，程序无权主动调用。

var de=document.documentElement;
//调整兼容性
de.requestFullScreen=
de.requestFullScreen||
de.webkitRequestFullScreen||
de.mozRequestFullScreen;
//计时器调用（无效）
setTimeout(function(){
de.requestFullScreen();
},1);
//点击事件调用（有效）
de.onclick=function(){
de.requestFullScreen();
};



　　
目前这些全屏API还是有前缀的，所以使用起来有点麻烦，将来规范化后去掉前缀使用就会方便一些。对于一些非用户事件，比如onload、timeout，等之类的事件中调用requestFullScreen是无法生效的。出于安全性考虑必须在用户事件中调用，比如鼠标、键盘，操作。在进入全屏后，不同的浏览器会做出不同的提示：

Firefox：



Chrome：



　　虽然全屏是针对viewport的，但是对文档全屏的方法本身是在body或documentElement上的，具体原因我也没去详细了解。其它viewport比如CANVAS、VIDEO，之类的也可以发起全屏请求。

　　当然，全屏API当然不只是调用全屏这个一个方法，还有取消和判断之类的。不过由于目前规范尚未落实，所以其它方法可能还有一些其它的兼容性问题。我这里就不深入了，懂得用就行。其它具体描述可以看MDN。

　　　　参考：MDN - Using full screen mode