关于全屏（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.οnclick=function(){de.requestFullScreen();};

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

Firefox：

Chrome：

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

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

　　　　参考： MDN - Using full screen mode

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

java安卓图片全屏_在Android中全屏显示GIF图片（演示代码）
[实例简介] 在Android中全屏显示GIF图片(演示代码),详细内容请参考:http://blog.csdn.net/u012939909/article/details/77418173 [实例 ...
Android studio中全屏显示
android中设置全屏显示的方法## 标题在MainActivity中添加如下代码 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FUL ...
js怎么让浏览器自动全屏显示
在HTML5中,W3C制定了关于全屏的API但是只能由用户事件触发,所以不能自动全屏:用户事件触发方法如下: // 判断各种浏览器,找到正确的方法进入全屏 function launchFulls ...
JavaScript 触发浏览器页面全屏，某div区域全屏
JavaScript Fullscreen API:全屏操作全屏API可以控制浏览器的全屏显示,让一个Element节点(以及子节点)占满用户的整个屏幕.目前各大浏览器的最新版本都支持这个API(包 ...
的run窗口不显示_「玩转deepin」如何安装VirtualBox增强功能使得deepin全屏显示？...
在Windows上通过Virtualbox安装deepin深度操作系统,安装完成后,为了让deepin可以在virtualbox中全屏显示,需要安装增强工具,但是不少同学点击安装增强工具后会出现无法安 ...
深度linux安装virtualbox,【玩转deepin】如何安装VirtualBox增强功能使得deepin系统全屏显示？...
原标题:[玩转deepin]如何安装VirtualBox增强功能使得deepin系统全屏显示? 在Windows上通过Virtualbox安装deepin深度操作系统,安装完成后,为了让deepin可 ...
远程连接桌面不能全屏显示的解决方法
1) 在远程连接前,点击"远程桌面连接"对话框左下角的"选项" 2) 点击"显示"Tab页,在"显示"项中将滑块拖至最右 ...
远程连接桌面不能全屏显示
1) 在远程连接前,点击"远程桌面连接"对话框左下角的"选项" 2) 点击"显示"Tab页,在"显示"项中将滑块拖至最右 ...
包括edge，Chrome，火狐、百度，360等浏览器怎么全屏_如何在Microsoft Edge中启用和禁用全屏模式以及解决浏览器无法开启或关闭全屏的问题
文章目录 1. 引出问题 2. 解决问题 2.1 使用缩放菜单 2.2 Win + Shift + Enter窍门 2.3 最大化与全屏模式 2.4 以全屏模式观看网络视频 3. 重要总结 4. 解决 ...
使用JavaScript使浏览器进入全屏或退出全屏
使用JavaScript使浏览器进入全屏或退出全屏首先使用fullscreenElement判断浏览器是否在全屏状态. 如果是:则调用exitFullscreen函数退出全屏,否则调用request ...

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

关于全屏（FullScreen）

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

最新文章

热门文章