时间戳

首页 > 解决方案 > 仅在完全加载 CSS 时打印 iFrame

javascript - 仅在完全加载 CSS 时打印 iFrame

问题描述

我通过将它们放在一个空的 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 调用。）

标签： javascriptjquery

解决方案

我可能会做这样的事情：

  • 将事件处理程序添加到调用向父窗口 ( ) 或直接发送消息的函数onload的 CSS中，那么您不需要额外的脚本标记。linkparent.postMessage(...)
  • 外层窗口监听messageiframe 窗口的，收到后开始打印。

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

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

有关发布和接收消息的更多信息，请参阅 MDN 。

推荐阅读