DreamLife_ToolBox/javascape/full_button.js

48 lines
1.9 KiB
JavaScript
Raw Normal View History

2025-03-03 18:59:57 +08:00
// 获取两个全屏按钮
const fullscreenButton = document.getElementById('fullscreen-button');
const sidebarFullscreenButton = document.getElementById('sidebar-fullscreen-button');
// 绑定全屏切换事件
function toggleFullscreen() {
if (!document.fullscreenElement) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
}
updateFullscreenButton(true);
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
updateFullscreenButton(false);
}
}
// 更新按钮文本和图标
function updateFullscreenButton(isFullscreen) {
const buttons = [fullscreenButton, sidebarFullscreenButton];
buttons.forEach(button => {
if (isFullscreen) {
button.querySelector('span').textContent = '退出';
button.querySelector('.icon').innerHTML = '↵'; // 退出全屏图标
} else {
button.querySelector('span').textContent = '全屏';
button.querySelector('.icon').innerHTML = '⛶'; // 全屏图标
}
});
}
// 绑定点击事件
fullscreenButton.addEventListener('click', toggleFullscreen);
sidebarFullscreenButton.addEventListener('click', toggleFullscreen);