IE11 doesn't listen to MSFullscreenChange event

问题

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?

回答1:

Actually, the Microsoft documentation is wrong.

I'm testing against IE11 and it doesn't have the MSFullscreenChange event listener. Instead, it has the onmsfullscreenchange event handler.

So, just change this and your code should work.

回答2:

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

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

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');
    }
});

回答3:

If I navigate to http://brad.is/coding/BigScreen/, launch F12 Developer Tools, paste your script into the console, and click the “Run script” button, clicking the demo image displays the "Went full screen" message in the console as expected.

When pasting multiline scripts in the console, you have to click the “Run script” button or press Ctrl + Enter to actually submit the script for execution. Just pressing the Enter key inserts a newline in the script. Alternatively, you can change the script to be single-line. In this case, pressing the Enter key will submit the script for execution.

Disclosure: I am on the team that worked on Microsoft's implementation of the Fullscreen API.

来源：https://stackoverflow.com/questions/21475597/ie11-doesnt-listen-to-msfullscreenchange-event