我实现了一些全屏功能为我目前的项目,这里是脚本:
jQuery(document).ready(function ($) {
$(".full-screen-btn").bind("click", function () {
launchIntoFullscreen(document.getElementById("main-container"));
showExitFullScreenButton();
});
document.addEventListener("fullscreenchange", checkIfFullScreen);
document.addEventListener("webkitfullscreenchange", checkIfFullScreen);
document.addEventListener("mozfullscreenchange", checkIfFullScreen);
document.addEventListener("MSFullscreenChange", checkIfFullScreen);
function showFullScreenButton() {
$(".exit-full-screen-btn").addClass("full-screen-btn");
$(".exit-full-screen-btn").unbind('click')
$(".full-screen-btn").removeClass("exit-full-screen-btn");
$(".full-screen-btn").attr("value", "Full Screen");
$(".full-screen-btn").bind("click", function () {
launchIntoFullscreen(document.getElementById("main-container"));
showExitFullScreenButton();
});
}
function showExitFullScreenButton() {
$(".full-screen-btn").addClass("exit-full-screen-btn");
$(".full-screen-btn").unbind('click')
$(".exit-full-screen-btn").removeClass("full-screen-btn");
$(".exit-full-screen-btn").attr("value", "Exit");
$(".exit-full-screen-btn").bind("click", function () {
exitFullscreen();
showFullScreenButton();
});
}
function checkIfFullScreen() {
if ($(".full-screen-btn").length) {
showFullScreenButton();
} else {
showExitFullScreenButton();
}
}
// Find the right method, call on correct element
function launchIntoFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// Close fullscreen
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
});
字符串
一切都工作正常,除了当用户使用浏览器功能退出全屏(如f11和键盘中的ESC按钮),这不会更新我的退出按钮再次成为全屏按钮(我已经看到全屏和最小化按钮在Youtube和最小化按钮更新,即使用户使用浏览器功能退出全屏)。你们能帮助我吗?谢谢。
这是正在被替换的html输入按钮:
<input type="button" value="Full Screen" class="full-screen-btn"/>
型
3条答案
按热度按时间fjnneemd1#
不确定,但我认为你应该这样做:
字符串
1rhkuytd2#
我通过使用JavaScript中的
keyup Event
找到了答案:字符串
ao218c7q3#
只需使用
fullscreenchange
事件即可。字符串