简体繁体 English

在浏览器中使用Javascript响应切换到全屏模式（又称“剧院模式”）

[英]Responding to a switch to full-screen mode (AKA “theater mode”) in the browser, with Javascript

原文 2010-12-15 07:44:32 4 2 javascript/ resize/ document/ fullscreen/ detect

On most browsers hitting F11 switches the browser into a mode where there are no toolbars and menus. 在大多数浏览器中，按F11会将浏览器切换为没有工具栏和菜单的模式。 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). 当用户进入该模式时，我想对页面布局进行调整（具体来说-DIV应该覆盖整个客户区域-如果用户为F11s-那么添加到底部的多余空间就会被大面积覆盖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. 我尝试使用onkeydown事件并响应F11键码（122）-但它会在模式切换之前（按下键后）触发-其中documentElement的clientHeight仍然像以前一样。

I also tried responding to document.onresize and document.documentElement.onresize both of which doesn't seem to trigger when going F11. 我还尝试响应document.onresize和document.documentElement.onresize，这两者在进入F11时似乎都不会触发。

Any ideas? 有任何想法吗？

2 个解决方案

window.onresize似乎在FF3和IE8上都可以使用...

Chrome 15, Firefox 10, and Safari 5.1 now provide APIs to programmatically trigger fullscreen mode. Chrome 15，Firefox 10和Safari 5.1现在提供API，以编程方式触发全屏模式。 Fullscreen mode triggered this way provide events to detect fullscreen changes and CSS pseudo-classes for styling fullscreen elements. 以这种方式触发的全屏模式提供事件以检测全屏更改，并提供CSS伪类以设置全屏元素的样式。 Note that these events/pseudo-classes do not appear to apply when the user hits F11 however. 请注意，当用户单击F11时，这些事件/伪类似乎并不适用。

See this hacks.mozilla.org blog post for details. 有关详细信息，请参见hacks.mozilla.org博客。