IE11不会监听MSFullscreenChange事件

时间:2014-01-31 08:40:17

标签: javascript internet-explorer-11

我正在尝试使用Bigscreen.js在IE11中使用全屏。 但是IE11并没有听“MSFullscreenChange”事件。

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

将它放在控制台中,它不会在全屏上打印任何内容。 检测此事件的另一种方法是什么?

3 个答案:

答案 0 :(得分:0)

实际上,Microsoft文档是错误的。

我正在测试IE11,它没有MSFullscreenChange事件监听器。相反,它具有onmsfullscreenchange事件处理程序。

所以,只需更改此代码即可。

答案 1 :(得分:0)

我在my word game中遇到了类似的问题,在Internet Explorer 11中没有调用MSFullscreenChange侦听器:

ie11 screenshot

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

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中工作的完整代码:

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

答案 2 :(得分:-1)

如果我导航到http://brad.is/coding/BigScreen/,请启动F12开发者工具,将脚本粘贴到控制台,然后单击“运行脚本”按钮,单击演示图像将在控制台中显示“已全屏显示”消息预期

在控制台中粘贴多行脚本时,必须单击“运行脚本”按钮或按Ctrl + Enter才能实际提交脚本以供执行。只需按Enter键即可在脚本中插入换行符。或者,您可以将脚本更改为单行。在这种情况下,按Enter键将提交脚本以供执行。

披露:我参与了Microsoft实施Fullscreen API的团队。