Element.requestFullscreen() - フルスクリーンにする
公開日:
Element.requestFullscreen()は、Elementのメソッドです。要素を、フルスクリーン状態にします。
概要
IDL
Promise<void> requestFullscreen();引数
引数はありません。
返り値
Promise<void>Promise。引数はありません。
脚注
void
undefinedが返ることを表す。
仕様書
説明
requestFullscreen()は、対象の要素をフルスクリーン状態で表示するメソッドです。2017年3月現在、実装が進んでいるとは言えず、ブラウザによってメソッド名がバラバラなのでご注意下さい。
JavaScript
// html要素を取得
var rootElement = document.documentElement ;
// メソッドを統一 (本実装されてないブラウザが多い)
rootElement.requestFullscreen = rootElement.requestFullscreen || rootElement.mozRequestFullScreen || rootElement.webkitRequestFullscreen || rootElement.msRequestFullscreen ;
// メソッドを実行
rootElement.requestFullscreen() ;Promiseが返ります。フルスクリーン化が完了したタイミングで、処理を実行できます。ただし、requestFullscreen()が本実装されている場合に限ります。
JavaScript
rootElement.requestFullscreen().then(
// 成功した場合
function () {
// ...
} ,
// 失敗した場合 (エラーメッセージを受け取る)
function ( errorMessage ) {
// ...
}
) ;フルスクリーンを解除するには、Document.exitFullscreen()を実行して下さい。
JavaScript
// メソッドを統一 (本実装されてないブラウザが多い)
document.exitFullscreen = document.exitFullscreen || document.cancelFullScreen || document.mozCancelFullScreen || document.webkitCancelFullScreen || document.msExitFullscreen ;
// メソッドを実行
document.exitFullscreen() ;サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】Element.requestFullscreen() - フルスクリーンにする</title>
<link rel="canonical" href="https://syncer.jp/Web/API_Interface/Reference/IDL/Element/requestFullscreen/">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>インラインフレームで表示している場合、同一オリジンポリシーの問題で実行できません。このページを新しいウィンドウで開いてから、お試し下さい。</p>
<p><button id="request_fullscreen" type="button">フルスクリーンにする</button></p>
<p><button id="exit_fullscreen" type="button">フルスクリーンを解除する</button></p>
<hr>
<pre id="result"></pre>
<script>
// フルスクリーンにする
document.getElementById( "request_fullscreen" ).onclick = function () {
// html要素を取得
var rootElement = document.documentElement ;
// フルスクリーンにするためのメソッドを統一 (本実装されてないブラウザが多い)
rootElement.requestFullscreen = rootElement.requestFullscreen || rootElement.mozRequestFullScreen || rootElement.webkitRequestFullscreen || rootElement.msRequestFullscreen ;
// フルスクリーンにする
rootElement.requestFullscreen().then(
// 成功の場合
function () {
document.getElementById( "result" ).textContent = "結果: " + "成功!" ;
} ,
// 失敗の場合
function ( errorMessage ) {
document.getElementById( "result" ).textContent = "結果: " + "失敗! " + "(" + errorMessage + ")" ;
}
) ;
}
// フルスクリーンを解除する
document.getElementById( "exit_fullscreen" ).onclick = function () {
// フルスクリーンを解除するためのメソッドを統一 (本実装されてないブラウザが多い)
document.exitFullscreen = document.exitFullscreen || document.cancelFullScreen || document.mozCancelFullScreen || document.webkitCancelFullScreen || document.msExitFullscreen ;
// メソッドを実行
document.exitFullscreen() ;
}
</script>
</body>
</html>デモ
サポート状況
Element.requestFullscreen()のサポート状況です。
| ブラウザ | サポート状況 | ブラウザ | サポート状況 |
|---|---|---|---|
| Chrome | Partial supported 15+ (webkitRequestFullScreen) | Firefox | Partial supported 9+ (mozRequestFullScreen) |
| Edge | Partial supported 14+ (webkitRequestFullScreen) | Internet Explorer | Partial supported 11+ (msRequestFullscreen) |
| Safari | Partial supported 5.1+ (webkitRequestFullScreen) | Opera | Partial supported 15+ (webkitRequestFullScreen) |
| iOS Safari | Partial supported 10.0+ (webkitRequestFullScreen) | Android | Partial supported 4.4+ (webkitRequestFullScreen) |
Chrome
| バージョン | サポート状況 | 公開時期 | シェア |
|---|---|---|---|
| 57 | Partial supported (webkitRequestFullScreen) | 2017年3月頃 | 0.1% |
| 56 | Partial supported (webkitRequestFullScreen) | 2017年1月頃 | 12.02% |
| 55 | Partial supported (webkitRequestFullScreen) | 2016年12月頃 | 12.36% |
| 54 | Partial supported (webkitRequestFullScreen) | 2016年10月頃 | 0.44% |
| 53 | Partial supported (webkitRequestFullScreen) | 2016年9月頃 | 0.25% |
| 52 | Partial supported (webkitRequestFullScreen) | 2016年7月頃 | 0.27% |
| 51 | Partial supported (webkitRequestFullScreen) | 2016年6月頃 | 0.4% |
| 50 | Partial supported (webkitRequestFullScreen) | 2016年4月頃 | 0.32% |
| 49 | Partial supported (webkitRequestFullScreen) | 2016年3月頃 | 0.47% |
| 48 | Partial supported (webkitRequestFullScreen) | 2016年1月頃 | 0.02% |
| 47 | Partial supported (webkitRequestFullScreen) | 2015年12月頃 | 0.06% |
| 46 | Partial supported (webkitRequestFullScreen) | 2015年10月頃 | 0.56% |
| 45 | Partial supported (webkitRequestFullScreen) | 2015年9月頃 | 0.01% |
| 44 | Partial supported (webkitRequestFullScreen) | 2015年7月頃 | 0.83% |
| 43 | Partial supported (webkitRequestFullScreen) | 2015年5月頃 | 0.05% |
| 42 | Partial supported (webkitRequestFullScreen) | 2015年4月頃 | 0.05% |
| 41 | Partial supported (webkitRequestFullScreen) | 2015年3月頃 | 0.01% |
| 40 | Partial supported (webkitRequestFullScreen) | 2015年1月頃 | 0.59% |
| 39 | Partial supported (webkitRequestFullScreen) | 2014年11月頃 | 0.02% |
| 38 | Partial supported (webkitRequestFullScreen) | 2014年10月頃 | 0.08% |
| 37 | Partial supported (webkitRequestFullScreen) | 2014年8月頃 | 0.01% |
| 36 | Partial supported (webkitRequestFullScreen) | 2014年7月頃 | 0.01% |
| 35 | Partial supported (webkitRequestFullScreen) | 2014年5月頃 | 0.01% |
| 34 | Partial supported (webkitRequestFullScreen) | 2014年4月頃 | 0.14% |
| 33 | Partial supported (webkitRequestFullScreen) | 2014年2月頃 | 0.01% |
| 32 | Partial supported (webkitRequestFullScreen) | 2014年1月頃 | 0% |
| 31 | Partial supported (webkitRequestFullScreen) | 2013年11月頃 | 0.01% |
| 30 | Partial supported (webkitRequestFullScreen) | 2013年10月頃 | 0.03% |
| 29 | Partial supported (webkitRequestFullScreen) | 2013年8月頃 | 0% |
| 28 | Partial supported (webkitRequestFullScreen) | 2013年6月頃 | 0.03% |
| 27 | Partial supported (webkitRequestFullScreen) | 2013年5月頃 | 0.01% |
| 26 | Partial supported (webkitRequestFullScreen) | 2013年3月頃 | 0% |
| 25 | Partial supported (webkitRequestFullScreen) | 2013年2月頃 | 0% |
| 24 | Partial supported (webkitRequestFullScreen) | 2013年1月頃 | 0% |
| 23 | Partial supported (webkitRequestFullScreen) | 2012年11月頃 | 0% |
| 22 | Partial supported (webkitRequestFullScreen) | 2012年9月頃 | 0% |
| 21 | Partial supported (webkitRequestFullScreen) | 2012年7月頃 | 0% |
| 20 | Partial supported (webkitRequestFullScreen) | 2012年6月頃 | 0% |
| 19 | Partial supported (webkitRequestFullScreen) | 2012年5月頃 | 0% |
| 18 | Partial supported (webkitRequestFullScreen) | 2012年3月頃 | 0.01% |
| 17 | Partial supported (webkitRequestFullScreen) | 2012年2月頃 | 0.01% |
| 16 | Partial supported (webkitRequestFullScreen) | 2011年12月頃 | 0% |
| 15 | Partial supported (webkitRequestFullScreen) | 2011年10月頃 | 0% |
| 14 | Not Supported | 2011年9月頃 | 0% |
Firefox
| バージョン | サポート状況 | 公開時期 | シェア |
|---|---|---|---|
| 52 | Partial supported (mozRequestFullScreen) | 2017年3月頃 | 0.12% |
| 51 | Partial supported (mozRequestFullScreen) | 2017年1月頃 | 1.7% |
| 50 | Partial supported (mozRequestFullScreen) | 2016年11月頃 | 0.78% |
| 49 | Partial supported (mozRequestFullScreen) | 2016年9月頃 | 0.02% |
| 48 | Partial supported (mozRequestFullScreen) | 2016年8月頃 | 0.07% |
| 47 | Partial supported (mozRequestFullScreen) | 2016年6月頃 | 0.03% |
| 46 | Partial supported (mozRequestFullScreen) | 2016年4月頃 | 0.01% |
| 45 | Partial supported (mozRequestFullScreen) | 2016年3月頃 | 0.1% |
| 44 | Partial supported (mozRequestFullScreen) | 2016年1月頃 | 0.01% |
| 43 | Partial supported (mozRequestFullScreen) | 2015年12月頃 | 0.02% |
| 42 | Partial supported (mozRequestFullScreen) | 2015年11月頃 | 0.01% |
| 41 | Partial supported (mozRequestFullScreen) | 2015年9月頃 | 0% |
| 40 | Partial supported (mozRequestFullScreen) | 2015年8月頃 | 0.02% |
| 39 | Partial supported (mozRequestFullScreen) | 2015年7月頃 | 0.01% |
| 38 | Partial supported (mozRequestFullScreen) | 2015年5月頃 | 0.02% |
| 37 | Partial supported (mozRequestFullScreen) | 2015年3月頃 | 0% |
| 36 | Partial supported (mozRequestFullScreen) | 2015年2月頃 | 0.01% |
| 35 | Partial supported (mozRequestFullScreen) | 2015年1月頃 | 0% |
| 34 | Partial supported (mozRequestFullScreen) | 2014年12月頃 | 0.01% |
| 33 | Partial supported (mozRequestFullScreen) | 2014年10月頃 | 0% |
| 32 | Partial supported (mozRequestFullScreen) | 2014年9月頃 | 0% |
| 31 | Partial supported (mozRequestFullScreen) | 2014年7月頃 | 0.01% |
| 30 | Partial supported (mozRequestFullScreen) | 2014年6月頃 | 0% |
| 29 | Partial supported (mozRequestFullScreen) | 2014年4月頃 | 0% |
| 28 | Partial supported (mozRequestFullScreen) | 2014年3月頃 | 0.01% |
| 27 | Partial supported (mozRequestFullScreen) | 2014年2月頃 | 0% |
| 26 | Partial supported (mozRequestFullScreen) | 2013年12月頃 | 0% |
| 25 | Partial supported (mozRequestFullScreen) | 2013年10月頃 | 0% |
| 24 | Partial supported (mozRequestFullScreen) | 2013年9月頃 | 0% |
| 23 | Partial supported (mozRequestFullScreen) | 2013年8月頃 | 0% |
| 22 | Partial supported (mozRequestFullScreen) | 2013年6月頃 | 0% |
| 21 | Partial supported (mozRequestFullScreen) | 2013年5月頃 | 0% |
| 20 | Partial supported (mozRequestFullScreen) | 2013年4月頃 | 0% |
| 19 | Partial supported (mozRequestFullScreen) | 2013年2月頃 | 0% |
| 18 | Partial supported (mozRequestFullScreen) | 2013年1月頃 | 0% |
| 17 | Partial supported (mozRequestFullScreen) | 2012年11月頃 | 0% |
| 16 | Partial supported (mozRequestFullScreen) | 2012年10月頃 | 0% |
| 15 | Partial supported (mozRequestFullScreen) | 2012年8月頃 | 0% |
| 14 | Partial supported (mozRequestFullScreen) | 2012年7月頃 | 0% |
| 13 | Partial supported (mozRequestFullScreen) | 2012年6月頃 | 0% |
| 12 | Partial supported (mozRequestFullScreen) | 2012年4月頃 | 0% |
| 11 | Partial supported (mozRequestFullScreen) | 2012年3月頃 | 0% |
| 10 | Partial supported (mozRequestFullScreen) | 2012年1月頃 | 0% |
| 9 | Partial supported (mozRequestFullScreen) | 2011年12月頃 | 0% |
| 8 | Not Supported | 2011年11月頃 | 0% |
| 7 | Not Supported | 2011年9月頃 | 0% |
| 6 | Not Supported | 2011年8月頃 | 0% |
| 5 | Not Supported | 2011年6月頃 | 0% |
| 4 | Not Supported | 2011年3月頃 | 0% |
Edge
| バージョン | サポート状況 | 公開時期 | シェア |
|---|---|---|---|
| 14 | Partial supported (webkitRequestFullScreen) ベンダープレフィクス付きのサポートに戻りました。 | 2016年2月頃 | 1.05% |
| 13 | Supported | 2015年9月頃 | 0.08% |
Internet Explorer
| バージョン | サポート状況 | 公開時期 | シェア |
|---|---|---|---|
| 11 | Partial supported (msRequestFullscreen) | 2013年10月頃 | 4.99% |
| 10 | Not Supported | 2012年8月頃 | 0.09% |
| 9 | Not Supported | 2011年3月頃 | 0.18% |
| 8 | Not Supported | 2009年3月頃 | 0.04% |
| 7 | Not Supported | 2006年10月頃 | 0.01% |
| 6 | Not Supported | 2001年8月頃 | 0% |
Safari
| バージョン | サポート状況 | 公開時期 | シェア |
|---|---|---|---|
| 10 | Partial supported (webkitRequestFullScreen) | 2016年10月頃 | 0% |
| 9.1 | Partial supported (webkitRequestFullScreen) | 2015年9月頃 | 0% |
| 8.0 | Partial supported (webkitRequestFullScreen) | 2014年10月頃 | 0% |
| 7.1 | Partial supported (webkitRequestFullScreen) | 2013年10月頃 | 0% |
| 6.0 | Partial supported (webkitRequestFullScreen) | 2012年7月頃 | 0% |
| 5.1 | Partial supported (webkitRequestFullScreen) | 2011年7月頃 | 0% |
| 4 | Not Supported | 2009年6月頃 | 0% |
Opera
| バージョン | サポート状況 | 公開時期 | シェア |
|---|---|---|---|
| 43 | Partial supported (webkitRequestFullScreen) | 2017年2月頃 | 0.06% |
| 42 | Partial supported (webkitRequestFullScreen) | 2016年12月頃 | 0.09% |
| 41 | Partial supported (webkitRequestFullScreen) | 2016年10月頃 | 0.01% |
| 40 | Partial supported (webkitRequestFullScreen) | 2016年9月頃 | 0% |
| 39 | Partial supported (webkitRequestFullScreen) | 2016年8月頃 | 0% |
| 38 | Partial supported (webkitRequestFullScreen) | 2016年6月頃 | 0% |
| 37 | Partial supported (webkitRequestFullScreen) | 2016年5月頃 | 0.01% |
| 36 | Partial supported (webkitRequestFullScreen) | 2016年3月頃 | 0.01% |
| 35 | Partial supported (webkitRequestFullScreen) | 2016年2月頃 | 0% |
| 34 | Partial supported (webkitRequestFullScreen) | 2015年12月頃 | 0% |
| 33 | Partial supported (webkitRequestFullScreen) | 2015年10月頃 | 0% |
| 32 | Partial supported (webkitRequestFullScreen) | 2015年9月頃 | 0% |
| 31 | Partial supported (webkitRequestFullScreen) | 2015年8月頃 | 0% |
| 30 | Partial supported (webkitRequestFullScreen) | 2015年6月頃 | 0% |
| 29 | Partial supported (webkitRequestFullScreen) | 2015年4月頃 | 0% |
| 28 | Partial supported (webkitRequestFullScreen) | 2015年3月頃 | 0% |
| 27 | Partial supported (webkitRequestFullScreen) | 2015年1月頃 | 0% |
| 26 | Partial supported (webkitRequestFullScreen) | 2014年12月頃 | 0% |
| 25 | Partial supported (webkitRequestFullScreen) | 2014年10月頃 | 0% |
| 24 | Partial supported (webkitRequestFullScreen) | 2014年9月頃 | 0% |
| 23 | Partial supported (webkitRequestFullScreen) | 2014年7月頃 | 0% |
| 22 | Partial supported (webkitRequestFullScreen) | 2014年6月頃 | 0% |
| 21 | Partial supported (webkitRequestFullScreen) | 2014年5月頃 | 0.01% |
| 20 | Partial supported (webkitRequestFullScreen) | 2014年3月頃 | 0% |
| 19 | Partial supported (webkitRequestFullScreen) | 2014年1月頃 | 0% |
| 18 | Partial supported (webkitRequestFullScreen) | 2013年11月頃 | 0% |
| 17 | Partial supported (webkitRequestFullScreen) | 2013年10月頃 | 0% |
| 16 | Partial supported (webkitRequestFullScreen) | 2013年8月頃 | 0% |
| 15 | Partial supported (webkitRequestFullScreen) | 2013年7月頃 | 0% |
| 12 | Not Supported | 2012年6月頃 | 0.02% |
| 11.6 | Not Supported | 2011年12月頃 | 0% |
| 11.1 | Not Supported | 2011年4月頃 | 0% |
iOS Safari
| バージョン | サポート状況 | 公開時期 | シェア |
|---|---|---|---|
| 10.0 | Partial supported (webkitRequestFullScreen) | 2016年9月頃 | 39.65% |
| 9.1 | Not Supported | 2015年9月頃 | 5.39% |
| 8.3 | Not Supported | 2014年9月頃 | 1.03% |
| 7.0 | Not Supported | 2013年9月頃 | 0.24% |
| 6.0 | Not Supported | 2012年9月頃 | 0.05% |
| 5.1 | Not Supported | 2011年10月頃 | 0.03% |
Android
| バージョン | サポート状況 | 公開時期 | シェア |
|---|---|---|---|
| 4.4 | Partial supported (webkitRequestFullScreen) | 2013年10月頃 | 0% |
| 4.3 | Not Supported | 2013年7月頃 | 0% |
| 4.2 | Not Supported | 2013年3月頃 | 0.03% |
| 4.1 | Not Supported | 2012年12月頃 | 0% |
| 4.0 | Not Supported | 2012年6月頃 | 1.61% |
| 2.3 | Not Supported | 2011年10月頃 | 0% |