blob: 2a2b2416cfd958ead9e629e97aa9840e50bc5207 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
---
title: Element.onfullscreenchange
slug: Web/API/Element/onfullscreenchange
translation_of: Web/API/Element/onfullscreenchange
---
<div>元素接口的 <code><strong>onfullscreenchange</strong></code><strong> </strong>属性是在元素过渡到或过渡到全屏模式时触发的全屏更改事件的事件处理程序。</div>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><em>targetDocument</em>.onfullscreenchange = <em>fullscreenChangeHandler</em>;
</pre>
<h3 id="值">值</h3>
<p>当事件处理程序处于 <code>fullscreenchange </code>模式的时候, 表明游戏元素被改变了或者是退出了全屏模式</p>
<h2 id="Example">Example</h2>
<p>本示例建立一个<code>fullscreenchange</code> 处理程序, <code>handleFullscreenChange ()</code>。此函数通过检查 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/target" title="A reference to the object that dispatched the event. It is different from event.currentTarget when the event handler is called during the bubbling or capturing phase of the event."><code>event.target</code></a> 的值来确定调用它的元素, 然后将文档的<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement" title="The documentation about this has not yet been written; please consider contributing!"><code>fullscreenElement</code></a> 值与元素进行比较, 以查看它们是否为同一节点。</p>
<p>这给了我们一个值, 即 <code>isFullscreen</code>, 我们将其传递到一个名为 <code>adjustMyControls()</code> 的函数, 我们想象它是一个函数, 可以对应用的用户界面进行调整, 以便在全屏模式下而不是在窗口。</p>
<pre class="brush: js">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);
}
</pre>
<p> </p>
<h2 id="程序规范">程序规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范表达式</th>
<th scope="col">程序状态</th>
<th scope="col">解释</th>
</tr>
<tr>
<td><a href="https://fullscreen.spec.whatwg.org/#dom-document-fullscreenelement" hreflang="en" lang="en" rel="noopener">Fullscreen API<br>
<small lang="en-US">The definition of 'Document.fullscreenElement' in that specification.</small></a></td>
<td>Living Standard</td>
<td>初始化定义</td>
</tr>
</tbody>
</table>
<h2 id="浏览器适配">浏览器适配</h2>
<p><a id="ss" name="ss"><em>请切换至英文版本查看<code>浏览器适配统计表</code></em></a></p>
<p>此页上的兼容性表是由结构化数据生成的。如果您想提供数据, 请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送 <code>pull request</code>。</p>
<h2 id="其他">其他</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a></li>
<li><code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange" title="/en-US/docs/Web/Events/fullscreenchange">fullscreenchange</a></code></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/onfullscreenerror" title="The Element interface's onfullscreenerror property is an event handler for the fullscreenerror event which is sent to the element when an error occurs while attempting to transition into or out of full-screen mode."><code>Element.onfullscreenerror</code></a></li>
<li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree."><code>Document</code></a> equivalent: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onfullscreenchange" title="The Document.onfullscreenchange property is an event handler for the fullscreenchange event that is fired when a document goes in or out of the fullscreen mode."><code>onfullscreenchange</code></a>.</li>
</ul>
|
