blob: 045a7602464337d1e57ab6b97757549813e1e742 (
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
---
title: Element.requestFullscreen()
slug: Web/API/Element/requestFullScreen
translation_of: Web/API/Element/requestFullScreen
---
<div>{{APIRef("Fullscreen API")}}</div>
<p><code><strong>Element.requestFullscreen()</strong></code> 方法用于发出异步请求使元素进入全屏模式。</p>
<p>调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，返回的{{JSxRef("Promise")}}会resolve，并且该元素会收到一个{{event("fullscreenchange")}}事件，通知它已经进入全屏模式。如果全屏请求被拒绝，返回的promise会变成rejected并且该元素会收到一个{{Event('fullscreenerror')}}事件。如果该元素已经从原来的文档中分离，那么该文档将会收到这些事件。</p>
<p>早期的Fullscreen API实现总是会把这些事件发送给document，而不是调用的元素，所以你自己可能需要处理这样的情况。参考 {{SectionOnPage("/zh-CN/docs/Web/Events/fullscreen", "Browser compatibility")}} 来得知哪些浏览器做了这个改动。</p>
<div class="note">
<p>注意：这个方法只能在用户交互或者设备方向改变的时候调用，否则将会失败。</p>
</div>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><em>var Promise = Element</em>.requestFullscreen(options);
</pre>
<h3 id="参数">参数</h3>
<p><code>options</code> {{optional_inline}}</p>
<p>一个{{domxref("FullscreenOptions")}}对象提供切换到全屏模式的控制选项。目前，唯一的选项是{{domxref("FullscreenOptions.navigationUI", "navigationUI")}}，这控制了是否在元素处于全屏模式时显示导航条UI。默认值是<code>"auto"</code>，表明这将由浏览器来决定是否显示导航条。</p>
<h3 id="返回值">返回值</h3>
<p>在完成切换全屏模式后，返回一个已经用值 <code>undefined</code> resolved的{{JSxRef("Promise")}}</p>
<h3 id="异常">异常</h3>
<p><em><code>requestFullscreen()</code> </em><em>通过拒绝返回的 <code>Promise</code>来生成错误条件，而不是抛出一个传统的异常。拒绝控制器接收以下的某一个值：</em></p>
<dl>
<dt>{{jsxref("TypeError")}}</dt>
<dd>在以下几种情况下，会抛出<code>TypeError</code>：</dd>
</dl>
<ul>
<li>文档中包含的元素未完全激活，也就是说不是当前活动的元素。</li>
<li>元素不在文档之内。</li>
<li>因为功能策略限制配置或其他访问控制，元素不被允许使用<code>"fullscreen"</code>功能。</li>
<li>元素和它的文档是同一个节点。 </li>
</ul>
<dl>
</dl>
<h2 id="示例">示例</h2>
<p>在调用<code>requestFullScreen()之前，可以对</code>{{event("fullscreenchange")}} 和 {{event("fullscreenerror")}}事件进行监听，这样在请求进入全屏模式成功或者失败时都能收到事件通知。</p>
<h2 id="API规格">API规格</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td>
<td>{{Spec2("Fullscreen")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Edge</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br>
{{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled</td>
<td>11{{property_prefix("ms")}}<sup>[3]</sup></td>
<td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br>
{{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] 同样以<code>webkitRequestFullScreen方法实现。</code></p>
<p>[2] 使用带有浏览器前缀的<code>mozRequestFullScreen方法实现。在火狐44之前版本，Gecko浏览器内核错误地允许frame里面元素以及object元素进入全屏模式。而在之后的版本，这个漏洞被修复：仅允许位于顶部文档（top-level document）的元素，以及拥有</code>{{htmlattrxref("allowfullscreen", "iframe")}}属性的iframe的内部元素进入全屏显示。. </p>
<p>[3] 使用IE时，最后的screen的s为小写，也即ms<code>RequestFullscreen，否则无效</code></p>
<p>[4] 谷歌浏览器前缀webkitRequestFullScreen()里最后的Screen的S也可以为小写s，建议写成驼峰命名法</p>
<p>[5]将浏览器前缀兼容封装成函数</p>
<pre>function toFullVideo(){
if(videoDom.requestFullscreen){
return videoDom.requestFullscreen();
}else if(videoDom.webkitRequestFullScreen){
return videoDom.webkitRequestFullScreen();
}else if(videoDom.mozRequestFullScreen){
return videoDom.mozRequestFullScreen();
}else{
return videoDom.msRequestFullscreen();
}
}</pre>
<p>[6] 详见 <a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">documentation on MSDN</a>.</p>
<h2 id="参阅">参阅</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Fullscreen_API">Full-screen API</a></li>
<li>{{ domxref("Element.requestFullscreen()") }}</li>
<li>{{ domxref("Document.exitFullscreen()") }}</li>
<li>{{ domxref("Document.fullscreen") }}</li>
<li>{{ domxref("Document.fullscreenElement") }}</li>
<li>{{ cssxref(":fullscreen") }}</li>
<li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
</ul>
|
