如何在子窗口页面加载完成后再打印其内容？

我明白你遇到的困扰了——通过AJAX获取内容打开新窗口打印时，打印对话框总是在页面内容加载完成前就弹出来，而且尝试绑定load事件也没效果。这其实是因为直接用document.write写入内容的方式，和常规加载外部页面的机制不太一样，咱们一步步来搞定它：

为什么你的load事件没生效？ #

当你调用window.open()打开空白窗口后，直接用document.write往里面写内容，这种情况下新窗口的load事件并不会像加载外部URL那样触发——因为浏览器认为这个窗口的内容是“即时写入”的，没有经历完整的资源加载流程。再加上你绑定事件的时机可能偏晚，等你绑定的时候，DOM已经开始解析了，自然就错过了事件触发点。

靠谱的解决方案 #

方案1：在写入的内容中嵌入触发打印的脚本 #

最稳妥的方式是在HTML内容末尾添加一段脚本，让它在页面内容加载完成后自动触发打印。这样脚本会随着DOM解析一起执行，能确保内容已经完全渲染：

function Print(){ 
  jQuery.ajax({ 
    type: 'POST', 
    data: { /* 你的字段内容 */ }, 
    url: 'getPageForPrint.php', 
    success: function(data){ 
      var WinPrint = window.open('','','left=0,top=0,width=' + screen.width + ',height=' + screen.height + ',toolbar=0,scrollbars=1,status=0');
      
      // 写入基础内容
      WinPrint.document.write('<div style="background-color: #f8f8f8;">');
      WinPrint.document.write(data);
      WinPrint.document.write('</div>');
      
      // 添加脚本，确保页面加载完成后执行打印
      WinPrint.document.write(`
        <script>
          window.onload = function() {
            window.focus(); // 确保窗口获得焦点，避免打印无响应
            window.print(); // 触发打印对话框
            window.close(); // 打印完成后自动关闭窗口
          }
        <\/script>
      `);
      
      WinPrint.document.close(); // 必须调用close，让浏览器结束写入并开始渲染内容
    } 
  }); 
}

方案2：监听新窗口的DOMContentLoaded事件 #

如果你不想在内容里嵌入脚本，也可以在写入内容并关闭document后，监听新窗口的DOMContentLoaded事件（这个事件会在DOM结构解析完成后触发，比load事件更早，适合不需要等待图片等外部资源的打印场景）：

function Print(){ 
  jQuery.ajax({ 
    type: 'POST', 
    data: { /* 你的字段内容 */ }, 
    url: 'getPageForPrint.php', 
    success: function(data){ 
      var WinPrint = window.open('','','left=0,top=0,width=' + screen.width + ',height=' + screen.height + ',toolbar=0,scrollbars=1,status=0');
      
      WinPrint.document.write('<div style="background-color: #f8f8f8;">');
      WinPrint.document.write(data);
      WinPrint.document.write('</div>');
      
      WinPrint.document.close(); // 先关闭文档流，触发DOM渲染
      
      // 监听DOM解析完成事件
      WinPrint.addEventListener('DOMContentLoaded', function() {
        // 确认目标打印元素存在后执行操作
        if (WinPrint.document.getElementById('print_content')) {
          WinPrint.focus();
          WinPrint.print();
          WinPrint.close();
        }
      });
    } 
  }); 
}

关键注意点 #

• 必须调用WinPrint.document.close()：写完内容后一定要关闭文档流，否则浏览器会一直等待更多内容输入，导致DOM无法完全渲染，相关事件也不会触发。
• 优先选DOMContentLoaded而非load：load事件需要等待所有外部资源（图片、样式表等）加载完成，而DOMContentLoaded在DOM结构解析完成就触发，对于打印场景来说足够，能更快触发打印操作。

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