Question

我正在做一个简单的打印选项，当我点击我调用打印功能。该函数复制相关（不是全部）html。

function print() {

var printWindow = window.open("", "Print", "status=no, toolbar=no, scrollbars=yes", "false" );
var toInsert = $("div.book").html();
$(printWindow.document.body).html(toInsert);

}

我遇到的问题是这个新窗口似乎无法引用我的css样式表或文件夹中的我的图片。有任何想法吗？只关注css问题，是否可以在新窗口的头部插入<link ... />？

谢谢！

Answer 1

这是一个全新的窗口。它必须有自己的CSS等。

当您将文档写入其中时，您必须使用<link>标记，<script>标记以及其他所有内容进行书写。

Answer 2

function Print() {
    var printWindow = window.open("", "Print", "status=no, toolbar=no, scrollbars=yes", "false" );
    $("link, style, script").each(function() {
       $(printWindow.document.head).append($(this).clone())
    });
    var toInsert = $("div.book").html();
    $(printWindow.document.body).append(toInsert);
}

DEMO

Answer 3

要动态地将现有CSS样式表的链接插入到新窗口的开头，这对我来说很有用：

var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'http://www.somedomain.com/styles/FireFox.css';
cssNode.media = 'screen';
cssNode.title = 'dynamicLoadedSheet';
printWindow.document.getElementsByTagName("head")[0].appendChild(cssNode);

Source: Totally Pwn CSS with Javascript - 还有一些有关直接操作样式表的有趣技巧

用css和图片打开新窗口

3 个答案: