JavaScript打印Div在Safari浏览器中失效，弹窗即刻关闭求解决方案

这个问题我之前帮不少开发者踩过坑，Safari对弹窗的安全限制确实比Chrome和Firefox严格得多，你的弹窗一闪而过大概率是这几个原因导致的，咱们一步步来解决：

核心原因&解决方案 #

1. 确保弹窗在用户主动交互上下文中触发 #

Safari会严格拦截非用户直接触发的弹窗（比如异步回调、setTimeout、AJAX响应里的弹窗），哪怕这些操作是由用户点击间接引发的也不行。

解决办法：
必须把window.open的调用放在用户直接交互的事件里，比如click、submit这类同步触发的事件处理函数中，不能放在异步回调里。如果需要先获取数据再生成打印内容，可以先打开空弹窗，再在弹窗里加载数据（后面会给示例）。

2. 写完内容后一定要关闭文档流 #

Safari中如果调用document.write后不关闭文档流，浏览器可能会认为页面还在加载中，进而判定弹窗无效并自动关闭。

解决办法：
在所有document.write执行完毕后，必须调用mywindow.document.close();来关闭文档流。

3. 检查弹窗是否被拦截 #

有时候Safari会直接阻止弹窗（比如用户之前拒绝过权限），这时候window.open会返回null，咱们需要做个兜底提示。

修改后的完整代码示例 #

// 绑定到用户点击事件（比如打印按钮）
document.getElementById('print-trigger-btn').addEventListener('click', function() {
  // 1. 打开弹窗（必须在用户点击的同步逻辑里）
  var printWindow = window.open('', 'PRINT_WINDOW', 'height=400,width=600');
  
  // 检查弹窗是否被拦截
  if (!printWindow) {
    alert('请允许弹窗权限以完成打印操作');
    return;
  }

  // 2. 写入打印内容
  printWindow.document.write(`
    <html style="background-color: white;">
      <head>
        <title>打印页面</title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/queue.css">
      </head>
      <body>
        <!-- 这里替换成你的实际打印内容 -->
        <h1>我的打印内容</h1>
        <p>测试打印文本</p>
      </body>
    </html>
  `);

  // 3. 关键：关闭文档流
  printWindow.document.close();

  // 4. 聚焦弹窗并触发打印（可选，根据需求调整）
  printWindow.focus();
  printWindow.print();

  // 如果你想打印后自动关闭弹窗，可以加这行，但建议让用户手动关闭体验更好
  // printWindow.close();
});

处理异步场景的特殊情况 #

如果你的打印内容需要先通过AJAX获取数据，不能直接同步写入，可以这么做：先在用户点击时打开空弹窗，显示加载提示，等数据返回后再替换内容：

let pendingPrintWindow;

document.getElementById('print-btn').addEventListener('click', function() {
  // 先打开空弹窗
  pendingPrintWindow = window.open('', 'PRINT_WINDOW', 'height=400,width=600');
  if (!pendingPrintWindow) {
    alert('请允许弹窗权限');
    return;
  }

  // 显示加载状态
  pendingPrintWindow.document.write('<p>正在准备打印内容...</p>');
  pendingPrintWindow.document.close();

  // 发起异步请求获取数据
  fetch('/api/get-print-data')
    .then(response => response.text())
    .then(printContent => {
      // 重新打开文档流，写入完整内容
      pendingPrintWindow.document.open();
      pendingPrintWindow.document.write(`
        <html style="background-color: white;">
          <head>
            <title>打印页面</title>
            <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/queue.css">
          </head>
          <body>${printContent}</body>
        </html>
      `);
      pendingPrintWindow.document.close();
      pendingPrintWindow.focus();
      pendingPrintWindow.print();
    })
    .catch(error => {
      pendingPrintWindow.document.write(`<p>加载失败：${error.message}</p>`);
      pendingPrintWindow.document.close();
    });
});

额外注意点 #

• 弹窗的名称（第二个参数）尽量用简单的标识符，避免特殊字符；
• 确保CSS文件的路径是绝对路径或者能被弹窗正常访问（比如不要用相对路径导致资源404）；
• 尽量避免在弹窗里加载过多外部资源，Safari对弹窗的资源加载也有一定限制。

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