From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/element/onfullscreenchange/index.html | 78 ++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 files/zh-cn/web/api/element/onfullscreenchange/index.html (limited to 'files/zh-cn/web/api/element/onfullscreenchange/index.html') diff --git a/files/zh-cn/web/api/element/onfullscreenchange/index.html b/files/zh-cn/web/api/element/onfullscreenchange/index.html new file mode 100644 index 0000000000..2a2b2416cf --- /dev/null +++ b/files/zh-cn/web/api/element/onfullscreenchange/index.html @@ -0,0 +1,78 @@ +--- +title: Element.onfullscreenchange +slug: Web/API/Element/onfullscreenchange +translation_of: Web/API/Element/onfullscreenchange +--- +
元素接口的 onfullscreenchange 属性是在元素过渡到或过渡到全屏模式时触发的全屏更改事件的事件处理程序。
+ +

语法

+ +
targetDocument.onfullscreenchange = fullscreenChangeHandler;
+
+ +

值

+ +

当事件处理程序处于 fullscreenchange 模式的时候, 表明游戏元素被改变了或者是退出了全屏模式

+ +

Example

+ +

本示例建立一个fullscreenchange 处理程序, handleFullscreenChange ()。此函数通过检查 event.target 的值来确定调用它的元素, 然后将文档的fullscreenElement 值与元素进行比较, 以查看它们是否为同一节点。

+ +

这给了我们一个值, 即 isFullscreen, 我们将其传递到一个名为 adjustMyControls() 的函数, 我们想象它是一个函数, 可以对应用的用户界面进行调整, 以便在全屏模式下而不是在窗口。

+ +
function toggleFullscreen() {
+  let elem = document.querySelector("video");
+
+  elem.onfullscreenchange = handleFullscreenChange;
+  if (!document.fullscreenElement) {
+    elem.requestFullscreen().then({}).catch(err => {
+      alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+    });
+  } else {
+    document.exitFullscreen();
+  }
+}
+
+function handleFullscreenChange(event) {
+  let elem = event.target;
+  let isFullscreen = document.fullscreenElement === elem;
+
+  adjustMyControls(isFullscreen);
+}
+
+ +

 

+ +

程序规范

+ + + + + + + + + + + + + + +
规范表达式程序状态解释
Fullscreen API
+ The definition of 'Document.fullscreenElement' in that specification.		Living Standard初始化定义
+ +

浏览器适配

+ +

请切换至英文版本查看浏览器适配统计表

+ +

此页上的兼容性表是由结构化数据生成的。如果您想提供数据, 请查看 https://github.com/mdn/browser-compat-data 并向我们发送 pull request。

+ +

其他

+ + -- cgit v1.2.3-54-g00ecf