Javascript 在浏览器中退出全屏的按钮不';t更新
我为当前项目实现了一些全屏功能,下面是脚本:Javascript 在浏览器中退出全屏的按钮不';t更新,javascript,jquery,html,html5-fullscreen,Javascript,Jquery,Html,Html5 Fullscreen,我为当前项目实现了一些全屏功能,下面是脚本: jQuery(document).ready(function ($) { $(".full-screen-btn").bind("click", function () { launchIntoFullscreen(document.getElementById("main-container")); showExitFullScreenButton(); }); document.add
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"/>
不确定,但我认为您应该这样做:
function exitFullscreen() {
showFullScreenButton(); // THIS IS MY EDIT
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
我通过在javascript中使用
keyup事件
找到了答案:
function checkIfFullScreen() {
if ($(".full-screen-btn").length) {
showFullScreenButton();
} else {
showExitFullScreenButton();
}
// check if f11 or ESC button was pressed
$(document).keyup(function (e) {
if (e.which == 122 || e.which == 27) {
e.preventDefault();
showFullScreenButton();
}
});
}
不起作用,我想我将尝试脚本中的
事件键控
,看看它是否可以处理这项工作。