1.实现->点击button实现全屏模式
// 进入全屏
enterFullScreen() {
let de: any;
de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
}
}
问题：Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
即这个方法只能由浏览器点击button事件来实现，
不能用js
$('#xxx').on('click', function () {
that.enterFullScreen();
});
$(#id).click(); // 无效
2.退出全屏->点击button事件
问题下面方法不能实现退出全屏
// 退出全屏 -浏览器点击事件无效
exitFullScreen() {
let de: any;
de = document.documentElement;
if (de.exitFullscreen) {
de.exitFullscreen();
console.log('12');
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
console.log('13');
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
console.log('14');
}
console.log('15');
}
3.监听键盘按下Esc事件
问题：在全屏模式下，浏览器无法监听Esc事件
及以下方法都不能监听：
// 无效
$(window).keydown(function(event) {
if (event.keyCode === 27) {
console.log('你按下了Esc');
}
});
// 无效
$(document).keydown(function(event) {
if (event.keyCode === 27) {
console.log('你按下了Esc');
}
});
解决：
ngOnInit() {
const that = this;
window.onresize = function () {
if (!that.checkFull()) {
// 要执行的动作
console.log('你按下了Esc');
}
};
}
checkFull() {
let isFull: any;
isFull = document.fullscreenEnabled || document.webkitIsFullScreen;
if (isFull === undefined) {
isFull = false;
}
return isFull;
}
文档收集：
https://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/
https://blog.csdn.net/m0_37885651/article/details/79231670
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
