Element: fullscreenchange event

在此页

范例
规范
浏览器兼容性
另请参阅
相关话题

fullscreenchange event is fired immediately after an 元素 switches into or out of full-screen mode.

冒泡	Yes
可取消	No
接口	`事件`
事件处理程序特性	`onfullscreenchange`

This event is sent to the 元素 which is transitioning into or out of full-screen mode.

范例

In this example, a handler for the fullscreenchange event is added to the element whose ID is fullscreen-div .

If the user clicks on the "Toggle Fullscreen Mode" button, the click handler will toggle full-screen mode for the div 。若 document.fullscreenElement has a value it will exit full-screen mode. If not, the div will be placed into full-screen mode.

Remember that by the time the fullscreenchange event is handled, the status of the element has already changed. So if the change is to full-screen mode, document.fullscreenElement will point to the element that is now in full-screen mode. On the other hand, if document.fullscreenElement is null, full-screen mode has been canceled.

What that means to the example code is that, if an element is currently in full-screen mode, the fullscreenchange handler logs the id of the full-screen element to the console. If document.fullscreenElement is null, the code logs a message that the change is to leave full-screen mode.

HTML

 <h1>fullscreenchange event example</h1>
 <div id="fullscreen-div">
   <button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
 </div>

JavaScript

document.getElementById('fullscreen-div').addEventListener('fullscreenchange', (event) => {
  // document.fullscreenElement will point to the element that
  // is in fullscreen mode if there is one. If not, the value
  // of the property is null.
  if (document.fullscreenElement) {
    console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
  } else {
    console.log('Leaving full-screen mode.');
  }
});
document.getElementById('toggle-fullscreen').addEventListener('click', (event) => {
  if (document.fullscreenElement) {
    // exitFullscreen is only available on the Document object.
    document.exitFullscreen();
  } else {
    document.getElementById('fullscreen-div').requestFullscreen();
  }
});

规范

规范	状态
全屏 API	实时标准

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`fullscreenchange` event	Chrome 57	Edge ≤79	Firefox 64 64 不支持 10 — 64 Alternate Name Alternate Name Uses the non-standard name: `mozfullscreenchange`	IE ?	Opera 44	Safari ?	WebView Android 57	Chrome Android 57	Firefox Android 64 64 不支持 10 — 64 Alternate Name Alternate Name Uses the non-standard name: `mozfullscreenchange`	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0

在此页

范例

HTML

JavaScript

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题