本机全屏 JavaScript API 切换按钮答案

【问题标题】：Native Fullscreen JavaScript API toggle button本机全屏 JavaScript API 切换按钮
【发布时间】：2021-09-22 06:17:05
【问题描述】：

我不知道如何修改以下代码以包含切换按钮。当处于“正常”模式时，该按钮将使元素全屏显示，然后更改其功能以返回“正常”状态。

我已经修改了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
}

但它不起作用。任何建议都非常感谢！

【问题讨论】：

标签： javascript dom-events fullscreen

【解决方案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);

【讨论】：

谢谢，但是 FS 按钮现在消失了。可能是fullscreenObj 变量中缺少括号？
不，是?。所以使用var fullscreenObj = fullScreenApi.fullScreenEventName.indexOf('moz') > -1 ? document : container; 它就像一个魅力。感谢您指出这一点。

【解决方案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
}

【讨论】：

【解决方案3】：

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

这将大部分浏览器怪癖包装在一个更干净的界面中。

【讨论】：