Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

关于全屏(FullScreen)

  很久以前,浏览器就已经有全屏的概念的了。IE的open方法中可以配置上FullScreen参数来让打开的页面全屏化。但是这不太好用,所以没成为主流。而且,全屏这东西如果被恶意使用会给用户造成困扰,所以在现代浏览的全屏API中需要在用户事件中调用。
  open方法的第三个参数是可以对打开的窗口做一些配置,但是现代浏览器并没有吸收太多的这个部分,包括FullScreen这个配置。所以open的FullScreen依然只能在IE中使用。高版本IE中这个FullScreen也已经被弱化了,所以的全屏也只是最大化窗口而已。 open("about:blank",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
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^