使用CSS和图片打开新窗口

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);​
}

演示

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);

资料来源：带有Javascript的Totally Pwn CSS-关于直接操作样式表还有其他一些有趣的技巧