仅在 CSS 完全加载时打印 iFrame答案

【问题标题】：Print iFrame only when CSS is loaded completely仅在 CSS 完全加载时打印 iFrame
【发布时间】：2020-10-23 13:20:44
【问题描述】：

我通过将页面的选定部分放在一个空的 iframe 中来打印它们。一切都很好，除了 CSS。有时它在那里，有时不在那里，所以我猜在大多数情况下打印功能是在 css 完成之前加载的。不幸的是，我显然无法解决这个问题。基本代码：

var pStyles = new String ("<link href='/css/print.css' rel='stylesheet' type='text/css' id='cssprint' />");
var pWrapIn = new String ("<main><article><section>");
var pWrapOut = new String ("</section></article></main>");

function printFrame(fId) {
    window.frames["printhelper"].document.body.innerHTML = pStyles + pWrapIn + document.getElementById(fId).innerHTML + pWrapOut;
    console.log(window.frames["printhelper"].document.body.innerHTML);
    window.frames["printhelper"].window.focus();
    window.frames["printhelper"].window.print();
}

这可行，但存在所描述的 CSS 问题。为了确保 CSS 已加载，我最终使用了修改后的函数，但它根本不起作用：

function printFrame(fId) {
    window.frames["printhelper"].document.body.innerHTML = pStyles + pWrapIn + document.getElementById(fId).innerHTML + pWrapOut;
    console.log(window.frames["printhelper"].document.body.innerHTML);
    $(#cssprint).on('load', function() {
        console.log ('CSS loaded');
        window.frames["printhelper"].window.focus();
        window.frames["printhelper"].window.print();
    }, 0);
}

#cssprint 似乎永远不会加载，因此 console.log 保持为空并且没有完成打印。但是我做错了什么？（函数 printFrame 由 HTML 标记中的简单 onClick 调用。）

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我可能会这样做：

将 onload 事件处理程序添加到 CSS link 调用一个函数，该函数将消息发布到父窗口 (parent.postMessage(...)) 或直接这样做，那么您不需要额外的脚本标记。
外层窗口监听iframe窗口的message，收到后开始打印。

如果您不需要与父窗口同步任何内容，也可以跳过消息发布，直接在 onload 事件中打印：

<link onload="window.print()" ...>

有关 posting and receiving messages 的更多信息，请参阅 MDN。

【讨论】：

太好了，非常感谢！我在中的 onload 事件中遵循了您的第二条建议，它现在按预期工作！

【解决方案2】：

完整的工作功能（感谢 H.B.）：

var pStyles = new String ("<link href='/css/print.css' rel='stylesheet' type='text/css' onload='window.focus(); window.print()' />");
var pWrapIn = new String ("<main><article><section>");
var pWrapOut = new String ("</section></article></main>");

function printFrame(fId) {
    window.frames["printhelper"].document.body.innerHTML = pStyles + pWrapIn + document.getElementById(fId).innerHTML + pWrapOut;
}

【讨论】：