iOS 16 Safari中window.open()在异步函数内无法正常工作

问题根源 #

移动端Safari的弹窗拦截规则比桌面浏览器严格：只有在用户主动触发的同步事件上下文（比如点击、触摸事件的直接回调）里调用window.open()才会被允许。而fetch的then回调属于异步延迟执行的代码，脱离了用户交互的同步上下文，所以会被Safari直接拦截。

解决方案 #

核心思路是提前在用户交互的同步阶段打开空白窗口并保存引用，等异步请求完成后，再把空白窗口的地址替换为Blob的URL。

修改后的可运行代码

// 绑定用户点击事件（必须是用户主动触发的同步函数）
document.querySelector('#open-document-btn').addEventListener('click', async () => {
  // 1. 先在用户交互的同步上下文里打开空白窗口
  const targetWindow = window.open('', '_blank');
  if (!targetWindow) {
    // 处理弹窗被拦截的情况
    alert('请开启浏览器弹窗权限以查看文档');
    return;
  }

  try {
    const response = await fetch('http://example.com/movies.json');
    if (response.ok) {
      // 2. 正确将响应转为Blob（原代码直接传入Response对象是错误的）
      const blob = await response.blob();
      const blobUrl = window.URL.createObjectURL(blob);
      // 3. 把空白窗口的地址替换为Blob URL
      targetWindow.location.href = blobUrl;

      // 4. 页面加载完成后清理Blob URL，避免内存泄漏
      targetWindow.addEventListener('load', () => {
        window.URL.revokeObjectURL(blobUrl);
      });
    } else {
      targetWindow.document.write('请求失败，请稍后重试');
    }
  } catch (error) {
    console.error(error);
    targetWindow.document.write('加载出错：' + error.message);
  }
});

关键细节提醒 #

• 必须在用户交互同步上下文打开窗口：比如click、touchstart的直接回调，不能是异步嵌套的函数。
• 修正Blob创建逻辑：原代码直接把Response对象传入Blob构造函数是错误的，要使用response.blob()方法获取正确的二进制Blob数据。
• 处理弹窗拦截情况：提前判断window.open()的返回值，若为null说明弹窗被拦截，及时提示用户开启权限。
• 清理Blob URL：使用完后调用revokeObjectURL释放内存，避免长期占用浏览器资源。

替代方案（无法提前开窗口时） #

如果业务场景不允许提前打开空白窗口，可以考虑：

• 创建隐藏的<a>标签，设置download属性，异步完成后触发其click事件（适合下载场景）
• 将Blob URL赋值给页面内<iframe>的src属性，在当前页面展示文档

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