logo标签列表

如何使用样式表打印 iFrame？

javascriptjquerycssiframe
4
我已经创建了这段代码来打印iFrame中的数据。
function (data) {
    var frame = $("<iframe>", {
        name: "iFrame",
        class: "printFrame"
    });

    frame.appendTo("body");

    var head = $("<head></head>");

    _.each($("head link[rel=stylesheet]"), function (link) {
        var csslink = $("<link/>", { rel: "stylesheet", href: $(link).prop("href") })
        head.append(csslink);
    ;});

    frame.contents().find("head")
        .replaceWith(head);

    frame.contents().find("body")
        .append(this.html());

    window.frames["iFrame"].focus();
    window.frames["iFrame"].print();
}

这将创建一个iFrame，添加一个头部，在头部中设置所有需要的css链接来生成此网站。 然后它创建了主体。

问题是，样式不会应用于打印页面，除非我在frame.contents().find("head").replaceWith(head)这一行断开，这意味着该部分中有某些内容是异步运行的。

问题是，我是否可以在运行该行之前让代码等待一段时间，或者是否有其他方法可以完成此操作？ 不幸的是，我对iFrames并不是很熟悉，因此不知道它尝试做什么。

https://dev59.com/Vmkw5IYBdhLWcg3w1eC7 - Sagar Sinha
1
@SagarSinha 不确定你通过链接那个页面想要什么。你能否进一步解释一下或者评论一下你想要引用那个帖子的哪一部分？ - Hofftari
3个回答
2
这真是一件麻烦事。我一直不愿使用iframe，但因为有很多资源说使用iframe可以打印比屏幕上显示的内容更多的东西，所以我们决定尝试一下。
相反，这可以通过把数据放在一个隐藏的div中来解决，然后在window.print()之前显示该div。同时，页面上的所有其他元素都被赋予了“hidden-print”类，这是我们已经用于隐藏打印元素的类。
这对用户来说可能不太优雅（div将在用户退出打印对话框之前短暂显示），但它是一种更简单、更易于使用和管理的代码。
1
我认为您可以/应该将最后的focus()和print()调用移动到iframe的onload处理程序中，以便在样式加载和应用之后发生。
你能否稍微解释一下如何为 iframe 设置 onload 处理程序？更具体地说，如何确保 iframe 获得此处理程序而不是整个文档。 - Hofftari
一个例子会很好。 - Morris S
1

我刚遇到了同样的问题，然后做了以下操作：

setTimeout(() => {
  window.frames["iFrame"].focus();
  window.frames["iFrame"].print();
}, 500)

这对我来说似乎解决了问题。我不喜欢使用超时，而且长度最多只是猜测工作，但由于它不是系统关键性的，所以现在我可以继续使用。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接