0

以下のコードを変更してトグルボタンを含める方法がわかりません。「通常」モードの場合、ボタンは要素を全画面表示にし、その機能を「通常」状態に戻すように変更します。

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
}

しかし、それは機能しません。どんな提案も大歓迎です！

4

3 に答える 3

1

もう1つの問題は、Mozillaが、フルスクリーンになる要素ではなく、要素のfullscreenchangeイベントをリッスンすることを望んでいることです。document

// which object can handle a fullscreen event
var fullscreenObj = (fullScreenApi.fullScreenEventName.indexOf('moz') > -1 : document : container;

fullscreenObj.addEventListener(fullScreenApi.fullScreenEventName, function() {
    if (fullScreenApi.isFullScreen()) {
        container.style.width = container.style.height = '100%';
        fsButton.className = 'fs-on';
    } else {
        fsButton.className = 'fs-off';
    }
}, true);
于 2012-06-15T14:43:14.963 に答える
0

まず、fsButtonclickイベントリスナーをfullScreenApiのイベントリスナーにネストしないでくださいcontainer。フルスクリーンになるまで機能しません。fsButtonは全画面表示を担当し、全画面表示の後clickにイベントリスナーが接続されるため、アクションは発生しません。

これがあなたのニーズに合うはずのコードの修正版です：

var fsButton = document.getElementById('fsbutton'),
    container = document.getElementById('canvas');


if (window.fullScreenApi.supportsFullScreen) {
    fsButton.style.display = 'block';

    fsButton.addEventListener('click', function() {
        if (fsButton.className == 'fs-off') {
            window.fullScreenApi.requestFullScreen(container);
        } else {
            window.fullScreenApi.cancelFullScreen(container);
        }
    }, true);

    container.addEventListener(fullScreenApi.fullScreenEventName, function() {
        if (fullScreenApi.isFullScreen()) {
            container.style.width = container.style.height = '100%';
            fsButton.className = 'fs-on';
        } else {
            fsButton.className = 'fs-off';
        }
    }, true);
} else {
    // no fullscreen support - do nothing
}
于 2012-06-15T13:30:22.710 に答える
0

https://github.com/sindresorhus/screenfull.js/のようなものを使用することをお勧めします

これにより、ブラウザの癖のほとんどがよりクリーンなインターフェイスにラップされます。

于 2016-07-14T22:17:49.090 に答える