Question

我无法弄清楚如何修改以下代码以包含切换按钮。当处于“正常”模式时，按钮会使元素全屏显示，然后将其功能更改为“正常”状态。

我修改了John Dyer's 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希望您收听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);

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/

的内容

这将大多数浏览器怪癖包含在更干净的界面中。

原生全屏JavaScript API切换按钮

3 个答案: