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

微软Edge团队推出了原生分屏API，可通过_split目标参数调用window.open()来并排打开URL：

// 在支持的浏览器中会打开分屏窗格
window.open("https://example.com", "_split");

在不支持该特性的浏览器中，_split会被当作普通命名窗口，打开新标签页而非分屏窗格。需要仅在原生特性不可用时，使用iframe布局作为降级方案，但目前找不到可靠的UA或window属性来直接检测支持情况。

可行的检测方案 #

目前没有直接的API支持检测标识，可通过以下间接方式判断：

• 检测窗口打开后的行为特征
  调用window.open()后，通过返回的窗口对象尺寸判断是否触发了分屏逻辑。这种方法依赖浏览器的分屏表现，需处理弹窗拦截的情况：

  function supportsSplitScreen() {
    const testWindow = window.open('about:blank', '_split');
    if (!testWindow) return false; // 弹窗被拦截，无法完成检测
    
    // 分屏窗口宽度通常接近屏幕宽度的一半
    const isSplitMode = testWindow.innerWidth <= window.screen.width / 1.1;
    testWindow.close();
    return isSplitMode;
  }
  

• 基于浏览器版本推断
  原生_split目前仅在Chromium内核的Edge中支持（最低支持版本为111），可通过UA做版本判断，但这种方法不够严谨，存在UA被修改的风险：

  function supportsSplitScreen() {
    const uaMatch = navigator.userAgent.match(/Edg\/(\d+)/);
    return uaMatch && parseInt(uaMatch[1]) >= 111;
  }
  

降级逻辑示例 #

结合检测函数，实现分屏或iframe降级的逻辑：

function openSplitOrFallback(url) {
  if (supportsSplitScreen()) {
    window.open(url, '_split');
  } else {
    // 降级为内嵌iframe布局
    const iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.style.width = '50%';
    iframe.style.height = '100vh';
    iframe.style.border = 'none';
    document.body.appendChild(iframe);
  }
}

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