使用 Javascript 响应浏览器中切换到全屏模式(又名“剧院模式”)
在大多数浏览器上,按 F11 会将浏览器切换到没有工具栏和菜单的模式。当用户进入该模式时,我想对我的页面布局进行调整(具体来说 - 有一个 DIV 应该覆盖整个客户区域 - 如果用户 F11s - 那么添加到底部的额外空间会被大的分区)。
我尝试使用 onkeydown 事件并响应 F11 键码 (122) - 但它在模式切换之前触发(按下按键之后) - 其中 documentElement 的 clientHeight 仍然与之前一样。
我还尝试响应 document.onresize 和 document.documentElement.onresize ,这两者在按 F11 时似乎都不会触发。
有什么想法吗?
On most browsers hitting F11 switches the browser into a mode where there are no toolbars and menus. I'd like to make adjustments to my page layout when the user goes into that mode (specifically - there's a DIV that should cover the entire client area - If the user F11s - then the extra space added to the bottom is uncovered by the big div).
I tried using onkeydown event and responding to the F11 keycode (122) - but it triggers BEFORE the mode switches (after the key is pressed) - wherein the clientHeight of the documentElement is still as it was before.
I also tried responding to document.onresize and document.documentElement.onresize both of which doesn't seem to trigger when going F11.
Any ideas?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
window.onresize 似乎适用于 FF3 和 IE8...
window.onresize seems to work on both FF3 and IE8...
Chrome 15、Firefox 10 和 Safari 5.1 现在提供 API 以编程方式触发全屏模式。以这种方式触发的全屏模式提供了检测全屏更改的事件和用于设置全屏元素样式的 CSS 伪类。请注意,当用户按 F11 时,这些事件/伪类似乎并不适用。
请参阅这篇 hacks.mozilla.org 博客文章< /a> 了解详细信息。
Chrome 15, Firefox 10, and Safari 5.1 now provide APIs to programmatically trigger fullscreen mode. Fullscreen mode triggered this way provide events to detect fullscreen changes and CSS pseudo-classes for styling fullscreen elements. Note that these events/pseudo-classes do not appear to apply when the user hits F11 however.
See this hacks.mozilla.org blog post for details.