在浏览器中退出全屏的按钮没有更新
Button to exit full screen in browser doesn't update
我为我当前的项目实现了一些全屏功能,下面是脚本:
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 Event
找到了答案:
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();
}
});
}
相关文章:
- d3.js用按钮更新条形图工具提示
- 选择单选按钮更新2个输入字段
- 使用带角度的单选按钮更新不同的模型
- 通过 JavaScript 从主网格视图上的功能区按钮更新 CRM 2011 中的字段
- 如何在AngularJS中使用单个按钮更新列
- 使用js使html按钮更新选择标记onchange函数
- 在Javascript中刷新按钮更新Accordion
- 使用复选框和按钮更新<视频> src
- 使用按钮更新滑块 UI 值
- Elfinder文件管理器,带有多个按钮更新文本输入
- 如何通过单击按钮更新计数器和替换文本
- 按钮更新节点.js和 HTML
- 如何在 Meteor 中使用多个输入字段和单个更新按钮更新文档
- 使用按钮更新数据库行
- 如何在Javascript中通过点击按钮更新里程计值
- 使用angular js和单选按钮更新html表中的数据
- 通过点击html按钮更新html页面上的javascript变量
- 显示空白图表,然后使用按钮更新(谷歌图表)
- 如何通过按钮更新HTML文本
- 使用下拉按钮更新choropleth地图