用js实现最大化和最小化窗口

// 最大化窗口
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 不支持时的最佳方案，但并非完美解决方案。