IE11不监听MSFullscreenChange事件 [英] IE11 doesn't listen to MSFullscreenChange event

问题描述

我正在尝试使用Bigscreen.js在IE11中使用全屏显示. 但是IE11不会听"MSFullscreenChange"消息.事件.

I am trying to use fullscreen in IE11 using Bigscreen.js. But IE11 doesnt listen to "MSFullscreenChange" event.

document.addEventListener("MSFullscreenChange", function () {
     if (document.msFullscreenElement != null) {
         console.info("Went full screen");
     } else {
         console.info("Exited full screen");              
     }
});

将其放在控制台中，不会在全屏上显示任何内容. 检测此事件的另一种方法是什么?

Putting this in console, it prints nothing on fullscreen. What is the alternate way to detect this event?

推荐答案

我在我的文字游戏中遇到了类似的问题，则在Internet Explorer 11中未调用MSFullscreenChange侦听器:

I had a similar problem in my word game, the MSFullscreenChange listener was not called in Internet Explorer 11:

要解决此问题，我必须将侦听器附加到document而不是DOM元素(在本例中为#fullDiv).即使附加到DOM元素上的所有其他侦听器都变为全屏显示:

To fix the problem I had to attach the listener to the document instead of the DOM element (#fullDiv in my case). Even though all the other listeners where attached to the DOM element going fullscreen:

var domElem = document.getElementById('fullDiv');

domElem.addEventListener('fullscreenchange', updateFullCheck);
domElem.addEventListener('webkitfullscreenchange', updateFullCheck);
domElem.addEventListener('mozfullscreenchange', updateFullCheck);
document.addEventListener('MSFullscreenChange', updateFullCheck); // IE 11

下面是我在IE11，Edge，Safari/MacOS，Chrome，Firefox，Opera中运行的完整代码:

Below is my complete code working in IE11, Edge, Safari/MacOS, Chrome, Firefox, Opera:

'use strict';

function isFullscreenEnabled() {
    return  document.fullscreenEnabled || 
            document.webkitFullscreenEnabled || 
            document.mozFullScreenEnabled || 
            document.msFullscreenEnabled;
}

function getFullscreenElement() {
    return  document.fullscreenElement || 
            document.webkitFullscreenElement || 
            document.mozFullScreenElement || 
            document.msFullscreenElement;
}

jQuery(document).ready(function($) {
    if (isFullscreenEnabled()) {
        function updateFullCheck() {
            if (getFullscreenElement()) {
                $('#fullCheck').prop('checked', true).checkboxradio('refresh');
                $('#leftDiv').css('padding', '24px 0 24px 24px');
                $('#rightDiv').css('padding', '24px 24px 24px 0');
            } else {
                $('#fullCheck').prop('checked', false).checkboxradio('refresh');
                $('#leftDiv').css('padding', '0');
                $('#rightDiv').css('padding', '0');
            }
        }

        var domElem = document.getElementById('fullDiv');

        domElem.addEventListener('fullscreenchange', updateFullCheck);
        domElem.addEventListener('webkitfullscreenchange', updateFullCheck);
        domElem.addEventListener('mozfullscreenchange', updateFullCheck);
        document.addEventListener('MSFullscreenChange', updateFullCheck); // IE 11

        $('#fullCheck').checkboxradio().click(function(ev) {
            ev.preventDefault();
            ev.stopPropagation();
            
            if (getFullscreenElement()) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                    }
                } else {
                    if (domElem.requestFullscreen) {
                        domElem.requestFullscreen();
                    } else if (domElem.mozRequestFullScreen) {
                        domElem.mozRequestFullScreen();
                    } else if (domElem.webkitRequestFullscreen) {
                        domElem.webkitRequestFullscreen();
                    } else if (domElem.msRequestFullscreen) {
                        domElem.msRequestFullscreen();
                    }
                }
            }).checkboxradio('enable');
    }
});

这篇关于IE11不监听MSFullscreenChange事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！