53 lines
2.2 KiB
JavaScript
53 lines
2.2 KiB
JavaScript
// 获取两个全屏按钮
|
|
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 => {
|
|
// 更新文字
|
|
const textElement = button.querySelector('.btn-text');
|
|
if (textElement) {
|
|
textElement.textContent = isFullscreen ? '退出' : '全屏';
|
|
}
|
|
if (isFullscreen) {
|
|
button.querySelector('span').textContent = '退出';
|
|
button.querySelector('.icon').innerHTML = '<img src="./icon/off.png" width="30px">'; // 退出全屏图标
|
|
} else {
|
|
button.querySelector('span').textContent = '全屏';
|
|
button.querySelector('.icon').innerHTML = '<img src="./icon/full.png" width="30px">'; // 全屏图标
|
|
}
|
|
});
|
|
}
|
|
|
|
// 绑定点击事件
|
|
fullscreenButton.addEventListener('click', toggleFullscreen);
|
|
sidebarFullscreenButton.addEventListener('click', toggleFullscreen); |