用css和图片打开新窗口

Open new window with css and pictures

本文关键字：新窗口 窗口 css      更新时间：2024-04-13

我正在做一个简单的打印选项，当单击时，我会调用一个打印函数。该函数通过相关（不是全部）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 ... />？

谢谢！

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

演示

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

当您在其中写入文档时，必须写入<link>标记、<script>标记以及其他类似的标记。

要在新窗口的头部动态插入到现有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);

来源：Totally Pwn CSS with Javascript-在直接操作样式表方面还有一些其他有趣的技巧

相关文章：