以下のコードを変更してトグルボタンを含める方法がわかりません。「通常」モードの場合、ボタンは要素を全画面表示にし、その機能を「通常」状態に戻すように変更します。
JohnDyerのネイティブフルスクリーンJavaScriptAPIの例のコードを変更しました。
var fsButton = document.getElementById('fsbutton'),
fsElement = document.getElementById('specialstuff'),
fsStatus = document.getElementById('fsstatus');
if (window.fullScreenApi.supportsFullScreen) {
fsStatus.innerHTML = 'YES: Your browser supports FullScreen';
fsStatus.className = 'fullScreenSupported';
// handle button click
fsButton.addEventListener('click', function() {
window.fullScreenApi.requestFullScreen(fsElement);
}, true);
fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
if (fullScreenApi.isFullScreen()) {
fsStatus.innerHTML = 'Whoa, you went fullscreen';
} else {
fsStatus.innerHTML = 'Back to normal';
}
}, true);
} else {
fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
}
これに:
var container = document.getElementById('canvas'),
fsButton = document.getElementById('fsbutton');
if (window.fullScreenApi.supportsFullScreen) { // fullscreen supported
fsButton.style.display = 'block';
container.addEventListener(fullScreenApi.fullScreenEventName, function() {
fsButton.addEventListener('click', function() {
if (fullScreenApi.isFullScreen()) { // fullscreen is on
window.fullScreenApi.CancelFullScreen( container );
fsButton.className = 'fs-off';
} else { // fullscreen is off
window.fullScreenApi.requestFullScreen( container );
container.style.width = "100%";
container.style.height = "100%";
fsButton.className = 'fs-on';
}
}, true)
}, true);
} else {
// no fullscreen support - do nothing
}
しかし、それは機能しません。どんな提案も大歓迎です!