本机全屏JavaScript API切换按钮

Question

我不知道如何修改下面的代码以包含一个切换按钮。 在“正常”模式下，该按钮将使元素变为全屏，然后将其功能更改为“正常”状态。

我已经修改了John Dyer的Native Fullscreen JavaScript API示例中的代码：

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
}

但这是行不通的。 任何建议，不胜感激！

Answer 1

您将遇到的另一个问题是Mozilla希望您监听document元素上的fullscreenchange事件，而不是要全屏显示的元素。

// 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);

Answer 2

首先，您不应该将fsButton click事件侦听器嵌套到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
}

Answer 3

我建议使用类似https://github.com/sindresorhus/screenfull.js/的东西

这会将大多数浏览器怪癖包含在一个更简洁的界面中。