blob: 17054560e1f705fe8af0e3c4ba553a656738d773 (
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
|
---
title: Element.requestFullscreen()
slug: Web/API/Element/requestFullScreen
tags:
- API
- DOM
- Element
- Fullscreen API
- requestFullscreen
- メソッド
- リファレンス
- 全画面 API
translation_of: Web/API/Element/requestFullScreen
---
<div>{{APIRef("Fullscreen API")}}</div>
<p><code><strong>Element.requestFullscreen()</strong></code> メソッドは、要素を全画面表示するための非同期的な要求を発行します。</p>
<p>要素が全画面モードに移行することは保証されていません。全画面モードに移行する許可が与えられている場合は、返される {{jsxref("Promise")}} が解決され、文書が全画面モードになったことを知ることができる {{event("fullscreenchange")}} イベントを受け取るようになります。権限が拒否された場合は、代わりに {{event('fullscreenerror')}} イベントを受け取ります。</p>
<p>このメソッドはユーザーの操作又は機器の方向の変更によって呼び出す必要があり、そうでなければ失敗します。</p>
<div class="note">
<p>全画面で表示することができる要素は、 HTML 名前空間にあり (つまり、標準の HTML の要素であり)、加えて {{HTMLElement("svg")}} 要素や {{HTMLElement("math")}} 要素、文書の最上位にある要素、又は {{htmlattrxref("allowfullscreen", "iframe")}} 属性を持つ {{HTMLElement('iframe')}} だけです。すなわち、 {{HTMLElement('frame')}} や {{HTMLElement('object')}} の内部にある要素は全画面で表示できません。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox">var <em>Promise </em>= <em>Element</em>.requestFullscreen();
</pre>
<h3 id="Parameters" name="Parameters">引数</h3>
<p>なし。</p>
<h3 id="Return_value" name="Return_value">返値</h3>
<p>全画面への移行が完了した場合は、 <code>undefined</code> の値で解決した {{jsxref("Promise")}}。</p>
<h3 id="Exceptions" name="Exceptions">例外</h3>
<p>全画面のリクエストが失敗した場合は、 Promise が例外で拒否されるかもしれません。発生しうる例外は以下の通りです。</p>
<ul>
<li>要素の文書が、全画面への移行ができる状態にない (つまり、 <code>defaultView</code> がない)。</li>
<li>要素が HTML, SVG, Math の要素ではない</li>
<li>全画面が許可されていない (例えば、ユーザーの操作ではない) 又は対応していない。</li>
</ul>
<dl>
<dt><code>{{jsxref("TypeError")}}</code></dt>
<dd>以下の状況の一つが発生する可能性あります。</dd>
</dl>
<h2 id="Example" name="Example">例</h2>
<p><code>requestFullscreen()</code> を呼び出す前に、 {{event("fullscreenchange")}} 及び {{event("fullscreenerror")}} イベントのハンドラーを設定してください。そうすれば、いつ全画面モードに切り替えることに成功したか (又は権限がなくて拒否されたか) を知ることができます。</p>
<p>tbd</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullscreen()")}}</td>
<td>{{Spec2("Fullscreen")}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>機能</th>
<th>Chrome</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Edge</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>基本対応</td>
<td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td>
<td>{{CompatGeckoDesktop("9.0")}} <code>mozRequestFullScreen</code> として対応<sup>[2]</sup><br>
{{CompatGeckoDesktop("47.0")}} (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>
<tr>
<td>Promise の返却</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>機能</th>
<th>Chrome 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>基本対応</td>
<td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("9.0")}} <code>mozRequestFullScreen</code> として対応 <sup>[2]</sup><br>
{{CompatGeckoMobile("47.0")}} (full-screen-api.unprefix.enabled で制御)</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>Promise の返却</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] <code>webkitRequestFullscreen</code> としても実装されています。</p>
<p>[2] <code>mozRequestFullScreen</code> として実装されています (Screen の S は大文字です)。 Firefox 44 より前のバージョンでは、誤って {{HTMLElement('frame')}} や {{HTMLElement('object')}} の内部にある要素の要求も受け入れて、許可されれば全画面表示していました。これは Firefox 44 以降で修正済みです。文書の最上位にある要素、または {{htmlattrxref("allowfullscreen", "iframe")}} 属性を持つ {{HTMLElement('iframe')}} だけが全画面モードで表示できます。</p>
<p>[3] <a href="https://msdn.microsoft.com/library/dn254939%28v=vs.85%29.aspx">MSDN の文書</a>をご覧ください。</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/API/Fullscreen_API">全画面 API</a></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>
|
