Firefox自动关闭通过代码打开并修改URL的标签页问题

我之前也踩过Firefox这个Blob URL的坑！你遇到的问题核心是Firefox的安全机制：当你先打开空白标签，再在异步回调（比如$http请求完成后）修改标签的location时，Firefox会把这个操作判定为「非用户主动触发的弹出行为」，从而自动关闭标签——但手动粘贴Blob URL是用户主动操作，所以能正常加载。

下面给你两种经过验证的解决方案，都是适配AngularJS 1的场景：

方案一：先获取Blob再触发新标签（推荐） #

这种方式是先拿到PDF的Blob数据，再通过模拟用户点击a标签的方式打开新标签，Firefox会认可这是用户主动操作，不会拦截。

showReceipt: function(receiptUrl) {
  // 可选：给用户显示加载提示
  $scope.isLoadingReceipt = true;

  $http.get(receiptUrl, {
    headers: { 'Authorization': 'Bearer ' + authToken },
    responseType: 'blob' // 必须指定返回类型为blob
  }).then(function(response) {
    var blobUrl = URL.createObjectURL(response.data);
    // 创建临时a标签模拟用户点击
    var tempLink = document.createElement('a');
    tempLink.href = blobUrl;
    tempLink.target = '_blank';
    tempLink.type = 'application/pdf'; // 明确指定文件类型，提升兼容性
    // 可选：设置文件名，如果需要用户下载而不是预览的话
    // tempLink.download = 'receipt_' + new Date().getTime() + '.pdf';

    // 触发点击并清理临时元素
    document.body.appendChild(tempLink);
    tempLink.click();
    document.body.removeChild(tempLink);

    // 释放Blob URL，避免内存泄漏（延迟执行确保标签已加载）
    setTimeout(function() {
      URL.revokeObjectURL(blobUrl);
      $scope.isLoadingReceipt = false;
    }, 1500);
  }).catch(function(error) {
    $scope.isLoadingReceipt = false;
    console.error('加载收据失败:', error);
    // 这里可以给用户显示错误提示
  });
}

方案二：先打开标签并写入加载内容（适合需要在新标签显示加载状态的场景） #

如果你需要在新标签里先显示「加载中」的提示，而不是等待请求完成再打开标签，可以先给空白标签写入内容，让Firefox认为这个标签是合法的用户触发窗口：

showReceipt: function(receiptUrl) {
  // 打开新标签并写入加载内容
  var receiptWindow = window.open('about:blank');
  receiptWindow.document.write(`
    <html>
      <body style="display:flex;align-items:center;justify-content:center;height:100vh;margin:0;">
        <p>正在加载收据，请稍候...</p>
      </body>
    </html>
  `);
  receiptWindow.document.close(); // 必须调用close()完成写入

  $http.get(receiptUrl, {
    headers: { 'Authorization': 'Bearer ' + authToken },
    responseType: 'blob'
  }).then(function(response) {
    var blobUrl = URL.createObjectURL(response.data);
    receiptWindow.location = blobUrl;

    // 标签关闭时释放Blob URL
    receiptWindow.addEventListener('unload', function() {
      URL.revokeObjectURL(blobUrl);
    });
  }).catch(function(error) {
    // 请求失败时更新新标签的内容
    receiptWindow.document.write(`
      <html>
        <body style="display:flex;align-items:center;justify-content:center;height:100vh;margin:0;color:red;">
          <p>加载失败，请返回重试</p>
        </body>
      </html>
    `);
    receiptWindow.document.close();
    console.error('加载收据失败:', error);
  });
}

关键注意事项 #

• 必须确保操作是用户主动触发：所有代码必须放在用户点击按钮（或其他交互）的事件回调里，如果是定时器、异步监听等非用户触发的操作，Firefox还是会拦截。
• 及时释放Blob URL：每次创建Blob URL后，一定要在合适的时机调用URL.revokeObjectURL()，否则会造成浏览器内存泄漏。
• 兼容性优化：指定responseType: 'blob'是必须的，否则$http会把返回的二进制数据当成字符串处理，导致Blob无效。

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