我正在尝试使用Bigscreen.js在IE11中使用全屏。 但是IE11并没有听“MSFullscreenChange”事件。
document.addEventListener("MSFullscreenChange", function () {
if (document.msFullscreenElement != null) {
console.info("Went full screen");
} else {
console.info("Exited full screen");
}
});
将它放在控制台中,它不会在全屏上打印任何内容。 检测此事件的另一种方法是什么?
答案 0 :(得分:0)
实际上,Microsoft文档是错误的。
我正在测试IE11,它没有MSFullscreenChange
事件监听器。相反,它具有onmsfullscreenchange
事件处理程序。
所以,只需更改此代码即可。
答案 1 :(得分:0)
我在my word game中遇到了类似的问题,在Internet Explorer 11中没有调用MSFullscreenChange
侦听器:
要解决此问题,我必须将侦听器附加到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的团队。