PermissionStatus API在Safari中change事件不触发的问题求助

问题背景 #

我们需要在用户选择麦克风权限（允许/拒绝）时执行对应操作，但Safari 16.4至17.6版本中，即使按照规范通过addEventListener或onchange绑定change事件，用户点击权限对话框按钮后事件仍无响应，相同代码在Windows和Android平台的浏览器中正常工作。

方案1：通过getUserMedia的Promise结果处理（首选） #

直接利用navigator.mediaDevices.getUserMedia返回的Promise来判断权限状态，这是最可靠的跨平台实现，完全兼容Safari：

async function requestMicPermission() {
  try {
    // 发起麦克风权限请求
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    // 用户点击「允许」时执行的逻辑
    console.log("麦克风权限已允许");
    // 若仅需获取权限而非使用流，可关闭轨道释放资源
    stream.getTracks().forEach(track => track.stop());
  } catch (err) {
    // 处理权限拒绝或其他错误
    if (err.name === "NotAllowedError") {
      console.log("麦克风权限已拒绝");
      // 执行拒绝后的操作
    } else {
      console.error("麦克风权限请求失败:", err);
    }
  }
}

// 需在用户交互（如按钮点击）中调用，避免被浏览器拦截
document.querySelector("#request-btn").addEventListener("click", requestMicPermission);

方案2：Permission API结合轮询（针对预监听场景） #

如果需要提前监听权限状态变化（而非仅在发起请求时处理），由于Safari的change事件存在触发问题，可通过定期查询权限状态来模拟监听：

async function watchMicPermission() {
  let currentState = (await navigator.permissions.query({ name: "microphone" })).state;
  // 处理初始状态
  handlePermission(currentState);

  // 针对Safari的轮询逻辑
  const poller = setInterval(async () => {
    const newState = (await navigator.permissions.query({ name: "microphone" })).state;
    if (newState !== currentState) {
      currentState = newState;
      handlePermission(currentState);
    }
  }, 1000);

  // 其他正常支持change事件的浏览器，使用原生监听并取消轮询
  const permissionStatus = await navigator.permissions.query({ name: "microphone" });
  permissionStatus.addEventListener("change", () => {
    currentState = permissionStatus.state;
    handlePermission(currentState);
    clearInterval(poller);
  });
}

function handlePermission(state) {
  switch (state) {
    case "granted":
      console.log("麦克风权限已允许");
      // 执行允许后的操作
      break;
    case "denied":
      console.log("麦克风权限已拒绝");
      // 执行拒绝后的操作
      break;
    case "prompt":
      console.log("等待用户选择麦克风权限");
      break;
  }
}

// 启动监听
watchMicPermission();

重要提示 #

• 权限请求必须触发于用户主动交互（如按钮点击），否则会被浏览器的安全策略直接拦截。
• 方案1是最稳定的实现，建议优先采用；方案2仅适用于需要持续监听权限状态的场景。

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