Home
uupaa edited this page Oct 4, 2016
·
5 revisions
FullScreen.js は、フルスクリーンAPIをハンドリングする手段を提供します。
- FullScreen.enable はフルスクリーン機能が有効なら true になります
-
FullScreen.on(), FullScreen.off() で、
fullscreenchange
,fullscreenerror
イベントをハンドリングできます - FullScreen.request(node) で指定した node をフルスクリーン表示します
- FullScreen.toggle(node) で指定した node のフルスクリーン表示状態を切り替えます
- FullScreen.exit() でフルスクリーン表示を終了します
- FullScreen.isActive() はフルスクリーン表示中に true になります
- FullScreen.getActiveNode() はフルスクリーン表示している node を返します
- FullScreen.release() は内部で抱えているリソースを解放します
http://caniuse.com/#feat=fullscreen
FullScreen.enable | |
---|---|
Chrome 🖥️ | ⭕ |
Chrome 📱 | ⭕ |
Firefox | ⭕ |
Safari 🖥️ | ⭕ |
Safari 📱 | ❌ |
IE 10 | ❌ |
IE 11 | ⭕ |
Edge | ⭕ |
Android browser | ❌ |
<style>
#content { width: 100%; height: 100%; background-color: skyblue; }
#trace { width: 100%; height: 100px; }
</style>
<div id="content">
<button onclick="_fullscreen()">FullScreen.request()</button> |
<button onclick="_toggle()">FullScreen.toggle()</button> |
<button onclick="_exit()">FullScreen.exit()</button> |
<button onclick="_release()">FullScreen.release()</button><br>
<output id="output"></output>
</div>
<script src="./lib/WebModule.js"></script>
<script src="./lib/FullScreen.js"></script>
<script>
var content = document.querySelector("#content");
var output = document.querySelector("#output");
window.onload = function() {
if (FullScreen.enable) {
FullScreen.on("fullscreenchange", _onfullscreenchange);
FullScreen.on("fullscreenerror", _onfullscreenerror);
setTimeout(_tick, 1000);
} else {
output.innerHTML += "FullScreen API is not supported";
}
}
function _onfullscreenchange(eventType, event) {
console.info("FullScreen change event", eventType); // -> "fullscreenchange"
}
function _onfullscreenerror(eventType, event) {
console.info("FullScreen error event", eventType); // -> "fullscreenerror"
}
function _release() {
FullScreen.off("fullscreenchange", _onfullscreenchange);
FullScreen.off("fullscreenerror", _onfullscreenerror);
FullScreen.release();
output.innerHTML += "x";
}
function _tick() {
setTimeout(_tick, 1000);
if (FullScreen.enable) {
if (FullScreen.isActive()) {
output.innerHTML += "A";
if (FullScreen.getActiveNode() !== content) {
document.body.backgroundColor = "red";
}
} else {
output.innerHTML += "-";
}
}
}
function _fullscreen() {
if (FullScreen.enable) { FullScreen.request(content); }
}
function _toggle() {
if (FullScreen.enable) { FullScreen.toggle(content); }
}
function _exit() {
if (FullScreen.enable) { FullScreen.exit(); }
}
</script>