0

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

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

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

4

3 回答 3

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在全屏之前无法工作。fsButtonclick负责全屏，全屏后附加事件侦听器，因此该操作永远不会发生。

这是代码的修改版本，应该适合您的需要：

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 回答