// 最大化窗口
function maximizeWindow() {
if (window.innerWidth < screen.availWidth || window.innerHeight < screen.availHeight) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) { // Firefox
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari and Opera
document.documentElement.webkitRequestFullscreen();
} else if (document.documentElement.msRequestFullscreen) { // IE/Edge
document.documentElement.msRequestFullscreen();
}
} else {
minimizeWindow(); // 如果已经是最大化，则最小化
}
}
// 最小化窗口
function minimizeWindow() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
} else {
// Fallback for browsers that don't support fullscreen API
window.open('', '_self', ''); // For some browsers this will minimize
window.close(); // Immediately close the new window
}
}
// 示例用法: 将这些函数绑定到按钮点击事件
// HTML:
/*
<button onclick="maximizeWindow()">最大化</button>
<button onclick="minimizeWindow()">最小化</button>
*/
// 更简洁的写法 (使用可选链操作符 ?. 和逻辑或 || )
function maximizeWindowConcise() {
(
document.documentElement.requestFullscreen
|| document.documentElement.mozRequestFullScreen
|| document.documentElement.webkitRequestFullscreen
|| document.documentElement.msRequestFullscreen
)?.call(document.documentElement);
}
function minimizeWindowConcise() {
(
document.exitFullscreen
|| document.mozCancelFullScreen
|| document.webkitExitFullscreen
|| document.msExitFullscreen
)?.call(document);
// Fallback for browsers that don't support fullscreen API, same as before.
if(window.innerWidth === screen.availWidth && window.innerHeight === screen.availHeight){
window.open('', '_self', '');
window.close();
}
}
关键点和解释:
- 全屏 API: 核心是使用 Fullscreen API，它提供了一组方法来控制浏览器的全屏模式。
requestFullscreen()用于进入全屏，exitFullscreen()用于退出全屏。 - 浏览器兼容性: 不同的浏览器有不同的前缀，例如
moz,webkit,ms。 代码中包含了这些前缀以确保兼容性。 现在，大多数现代浏览器都支持无前缀版本。 - 最大化逻辑: 检查窗口大小是否小于可用屏幕大小。 如果小于，则进入全屏（即最大化）。如果已经是最大化状态，则调用
minimizeWindow()进行最小化。 - 最小化逻辑: 尝试退出全屏。如果浏览器不支持全屏 API，则使用
window.open()和window.close()的组合作为最小化的替代方案 (这种方法在某些浏览器中有效，但在其他浏览器中可能无效或行为不同)。 - 简洁写法: 使用可选链操作符
?.可以避免在调用不存在的方法时出错。 使用逻辑或||可以简化代码，避免冗长的if/else语句。 - Fallback 的局限性: 最小化的 fallback 方法 (使用
window.open和window.close) 并不总是可靠，因为它依赖于浏览器特定的行为。 有些浏览器可能会阻止弹出窗口，或者最小化的行为可能与预期不同。 这是 Fullscreen API 不支持时的最佳方案，但并非完美解决方案。
使用方法：
- 将 JavaScript 代码添加到你的 HTML 文件中 (最好放在
<head>或<body>的末尾)。 - 创建两个按钮，分别调用
maximizeWindow()和minimizeWindow()函数 (或简洁版本的函数)。
改进建议:
- 用户体验: 可以添加一些视觉提示，例如在最大化和最小化时更改按钮图标或文本。
- 错误处理: 可以添加更完善的错误处理，例如在全屏请求失败时显示错误消息。
这个改进的版本更加简洁，并提供了更好的浏览器兼容性和
标签：最大化,浏览器,documentElement,else,js,window,最小化,document From： https://www.cnblogs.com/ai888/p/18576440