Question

我正在尝试使用全屏API在IE中全屏显示内容一切正常，除了下面的IE是代码，任何帮助都会很棒。请提前告诉你。

JAVASCRIPT代码：

(function() {
    var 
        fullScreenApi = { 
            supportsFullScreen: false,
            isFullScreen: function() { return false; }, 
            requestFullScreen: function() {}, 
            cancelFullScreen: function() {},
            fullScreenEventName: '',
            prefix: ''
        },
        browserPrefixes = 'webkit moz o ms khtml'.split(' ');

    // check for native support
    if (typeof document.cancelFullScreen != 'undefined') {
        fullScreenApi.supportsFullScreen = true;
    } else {     
        // check for fullscreen support by vendor prefix
        for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
            fullScreenApi.prefix = browserPrefixes[i];

            if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
                fullScreenApi.supportsFullScreen = true;

                break;
            }
        }
    }

    // update methods to do something useful
    if (fullScreenApi.supportsFullScreen) {
        fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';

        fullScreenApi.isFullScreen = function() {
            switch (this.prefix) {  
                case '':
                    return document.fullScreen;
                case 'webkit':
                    return document.webkitIsFullScreen;

                default:
                    return document[this.prefix + 'FullScreen'];
            }
        }
        fullScreenApi.requestFullScreen = function(el) {
            return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
        }
        fullScreenApi.cancelFullScreen = function(el) {
            return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
        }       
    }

    // jQuery plugin
    if (typeof jQuery != 'undefined') {
        jQuery.fn.requestFullScreen = function() {

            return this.each(function() {
                var el = jQuery(this);
                if (fullScreenApi.supportsFullScreen) {
                    fullScreenApi.requestFullScreen(el);
                }
            });
        };
    }

    // export api
    window.fullScreenApi = fullScreenApi;   
})();

</script>

<script>


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




if (window.fullScreenApi.supportsFullScreen) {

// handle button click
fsButton.addEventListener('click', function() {
    //alert(fsElement);
    window.fullScreenApi.requestFullScreen(fsElement);
    //alert("hi");
}, true);

fsElement.addEventListener(fullScreenApi.fullScreenEventName, function()     {
    if (fullScreenApi.isFullScreen()) {
        alert("yes");
        //fsStatus.innerHTML = 'Whoa, you went fullscreen';
    } else {
        alert("no");
    //  fsStatus.innerHTML = 'Back to normal';
    }
}, true);

} else {
alert("no");
//  fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
}

</script>

HTML CODE：

<div>
  <div id="container" >
  ..... content goes here
  </div>
  <input type="button"  id="fsbutton" title="View Full Screen">
</div>

Answer 1

我没有尝试过，但我认为这是因为"Fullscreen"和"cancelFullscreen"中的"requestFullscreen"的IE doesn't use the camelCase，这是实际的live standard recommandation btw 。

这次其他浏览器都错了。

全屏api不适用于IE浏览器

1 个答案: