如何检测浏览器对提案中的`_split`窗口目标的支持性？

确实，目前没有直接的API或属性可以让你一键检测浏览器是否支持_split窗口目标——Edge团队还没提供专门的支持检测标识，这确实有点麻烦。不过我们可以通过间接的方式来判断，核心思路是利用_split打开窗口后的行为差异：支持的浏览器会打开分屏窗格（宽度约为屏幕的一半），不支持的则会打开普通新标签页（宽度和屏幕一致）。

下面是一个可行的检测方案，附带代码示例：

检测方法思路 #

1. 临时打开一个about:blank的_split窗口
2. 检查该窗口的宽度是否接近屏幕可用宽度的一半（考虑微小的系统差异）
3. 关闭临时窗口，根据结果决定使用原生API还是降级方案

代码实现 #

async function supportsSplitScreen() {
  // 尝试打开临时检测窗口
  const testWindow = window.open('about:blank', '_split');
  
  // 处理弹窗拦截的情况
  if (!testWindow) {
    // 弹窗被阻止，无法检测，默认使用降级方案
    return false;
  }

  // 等待窗口加载完成，确保尺寸数据准确
  await new Promise(resolve => {
    testWindow.onload = resolve;
    // 添加超时，防止窗口加载异常导致卡住
    setTimeout(resolve, 1000);
  });

  // 判断窗口宽度是否符合分屏特征（允许10px的误差）
  const isSplitScreenSupported = Math.abs(testWindow.innerWidth - screen.availWidth / 2) < 10;

  // 关闭临时窗口
  testWindow.close();
  
  return isSplitScreenSupported;
}

// 使用示例
supportsSplitScreen().then(isSupported => {
  if (isSupported) {
    // 支持原生分屏，直接使用_split目标
    window.open('https://example.com', '_split');
  } else {
    // 不支持，执行降级方案（比如iframe布局）
    setupFallbackSplitLayout('https://example.com');
  }
});

// 简单的降级布局示例
function setupFallbackSplitLayout(url) {
  document.body.style.margin = '0';
  document.body.style.display = 'flex';
  
  const iframe = document.createElement('iframe');
  iframe.src = url;
  iframe.style.flex = '1';
  iframe.style.border = 'none';
  iframe.style.height = '100vh';
  
  document.body.appendChild(iframe);
}

注意事项 #

• 弹窗拦截处理：如果浏览器阻止了临时窗口的弹出，我们只能默认降级，这时候可以考虑提示用户允许弹窗，或者直接启用降级方案。
• 超时机制：添加1秒的超时是为了避免窗口加载异常（比如about:blank加载失败）导致代码卡住。
• 误差范围：设置10px的误差是因为不同系统的屏幕边框、任务栏等可能会占用少量空间，导致分屏窗口宽度不是严格的屏幕一半。
• 隐私限制：部分浏览器可能限制访问弹出窗口的位置属性（比如left/top），所以我们主要依赖宽度检测，这是更可靠的方式。

目前只有Edge浏览器支持这个原生分屏API，但未来其他浏览器可能会跟进，这种基于行为的检测方式比依赖navigator.userAgent要更可靠，也能兼容未来的支持情况。

内容的提问来源于stack exchange，提问作者Simon S.