Firefox中无法关闭脚本打开的窗口问题求助

这段JS代码在Chrome中可以正常运行，打印完成后自动关闭新打开的窗口，但在Firefox中无法实现关闭窗口的效果，尽管Firefox本身允许关闭由JS主动打开的窗口。

原代码：

function print(){
    var canvas = document.getElementById("canvas");
    var printWindow = window.open();
    var printHtml = "<!DOCTYPE html>"
        + "<html lang='en'>"
        + "<meta charset='UTF-8'>"
        + "<title>Printing the canvas</title>"
        + "<style type='text/css' media='print'>"
        + "@page{size:auto; margin:0mm auto 0mm auto;} h1{text-align:center; font:10mm Arial, sans-serif;}"
        + "</style>"
        + "<script>"
        + "window.onafterprint = function(){ window.close(); };"
        + "</script>"
        + "<body>"
        + "<br><h1>My canvas</h1>"
        + "<br><img onload='print();' src='"+canvas.toDataURL()+"'/>"
        + "</body>"
        + "</html>";
    printWindow.document.write(printHtml);
}

问题原因 #

• 函数命名冲突：自定义的print函数和浏览器原生window.print()重名，Firefox中这种重名会导致执行逻辑混乱。
• 文档写入未完成：调用document.write后未关闭文档流，Firefox无法正确解析文档内容和绑定事件。
• 打印触发时机不可靠：依赖图片onload事件触发打印，在Firefox中存在时序问题。

解决方案及修改后的代码 #

// 重命名函数，避免和原生print冲突
function printCanvas(){
    var canvas = document.getElementById("canvas");
    var printWindow = window.open();
    var printHtml = "<!DOCTYPE html>"
        + "<html lang='en'>"
        + "<meta charset='UTF-8'>"
        + "<title>Printing the canvas</title>"
        + "<style type='text/css' media='print'>"
        + "@page{size:auto; margin:0mm auto 0mm auto;} h1{text-align:center; font:10mm Arial, sans-serif;}"
        + "</style>"
        + "<script>"
        + "// 使用addEventListener绑定afterprint事件，兼容性更好"
        + "window.addEventListener('afterprint', function(){"
        + "    window.close();"
        + "});"
        + "// 在DOM加载完成后触发打印，确保资源就绪"
        + "document.addEventListener('DOMContentLoaded', function(){"
        + "    window.print();"
        + "});"
        + "</script>"
        + "<body>"
        + "<br><h1>My canvas</h1>"
        + "<br><img src='"+canvas.toDataURL()+"'/>"
        + "</body>"
        + "</html>";
    printWindow.document.write(printHtml);
    // 关闭文档写入流，让Firefox正确解析文档
    printWindow.document.close();
}

修改说明 #

1. 将自定义打印函数重命名为printCanvas，彻底避免和原生函数的命名冲突。
2. 用addEventListener绑定afterprint事件，替代onafterprint属性，提升兼容性和可靠性。
3. 移除图片onload触发逻辑，改用DOMContentLoaded事件在文档加载完成后自动触发打印，确保所有资源就绪后执行。
4. 在document.write后调用document.close()，结束文档写入流，让Firefox正确完成文档解析和事件绑定。

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