如何在调用对应API前主动判断文档是否处于fully active状态

我们在调用部分JavaScript API时，常会遇到API要求文档必须处于fully active状态才可正常调用的限制，比如WakeLock API就有该要求。

现有判断的痛点 #

• 当文档不满足fully active状态时，调用WakeLock.request()会直接拒绝返回的Promise并抛出NotAllowedError错误
• 该错误可由多种触发原因导致，无法仅通过错误类型定位到是文档状态不符合要求的问题，因此需要在调用API前就主动完成状态校验。

主动校验方案 #

可以通过浏览器提供的原生API组合，实现fully active状态的判断，参考实现代码如下：

function isFullyActive(doc = document) {
  // 文档无关联的window对象，说明已被销毁/废弃
  if (!doc.defaultView) return false;

  let currentWin = doc.defaultView;
  const topWin = window.top;

  // 遍历校验当前文档所属的浏览上下文是否在顶层上下文的DOM树中
  while (currentWin.parent !== currentWin) {
    if (!topWin.document.contains(currentWin.frameElement)) {
      return false;
    }
    currentWin = currentWin.parent;
  }

  return true;
}

该实现对齐规范中对fully active状态的核心定义：文档关联的浏览上下文未被销毁，且属于当前顶层浏览上下文的活跃节点链。

用法示例 #

在调用有状态要求的API前，先执行校验逻辑即可：

if (isFullyActive()) {
  try {
    const wakeLock = await navigator.wakeLock.request('screen');
    // 后续业务逻辑
  } catch (e) {
    // 此时的NotAllowedError可排除文档状态问题，定位其他触发原因
  }
}

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