如何在新浏览器窗口中实现元素全屏显示？

• 核心需求：把文档中指定元素放到独立新浏览器窗口中全屏显示，Alt+Tab切换时能区分原文档窗口和全屏元素窗口
• 使用场景：双显示器环境，希望全屏元素显示在第二台显示器上

实现代码 #

async function openElementInFullscreenNewWindow(selector) {
  // 获取目标元素
  const targetElem = document.querySelector(selector);
  if (!targetElem) {
    console.error("未找到指定元素");
    return;
  }

  // 创建新窗口，设置基础属性（可根据需求调整）
  const newWindow = window.open("", "_blank", "toolbar=no,menubar=no,location=no");
  if (!newWindow) {
    console.error("浏览器阻止了新窗口弹出，请允许弹窗权限");
    return;
  }

  // 将目标元素的内容复制到新窗口
  newWindow.document.body.innerHTML = targetElem.outerHTML;
  // 可选：同步原页面的样式到新窗口
  const styleSheets = Array.from(document.styleSheets);
  styleSheets.forEach(sheet => {
    try {
      const style = newWindow.document.createElement("style");
      style.textContent = Array.from(sheet.cssRules).map(rule => rule.cssText).join("\n");
      newWindow.document.head.appendChild(style);
    } catch (e) {
      // 跨域样式无法访问，忽略
    }
  });

  // 等待新窗口DOM加载完成
  await new Promise(resolve => newWindow.onload = resolve);

  try {
    // 获取新窗口的屏幕信息
    const screenDetails = await newWindow.window.getScreenDetails();
    if (screenDetails.screens.length > 1) {
      // 选择第二台显示器（索引1，可根据实际屏幕顺序调整）
      const secondScreen = screenDetails.screens[1];
      // 获取新窗口中的目标元素副本
      const newWindowElem = newWindow.document.querySelector(selector);
      // 请求全屏并指定显示器
      await newWindowElem.requestFullscreen({ screen: secondScreen });
    } else {
      console.log("未检测到多显示器");
      // 单显示器下直接全屏
      const newWindowElem = newWindow.document.querySelector(selector);
      await newWindowElem.requestFullscreen();
    }
  } catch (err) {
    console.error(err.name, err.message);
    // 关闭新窗口（可选）
    newWindow.close();
  }
}

// 使用示例：传入目标元素的选择器
openElementInFullscreenNewWindow("#defect-map-table-main");

注意事项 #

• 需要浏览器允许弹窗权限，否则新窗口无法创建
• getScreenDetails API需要HTTPS环境（本地开发localhost除外）
• 屏幕索引screenDetails.screens[1]不一定是物理上的第二台显示器，可通过打印screenDetails.screens查看每个屏幕的label、left等属性来确认目标屏幕
• 样式同步部分仅处理同源样式，跨域样式无法复制，若需要完整样式可手动引入对应CSS文件

内容的提问来源于stack exchange，提问作者CorvusRex