用css和图片打开新窗口

我正在做一个简单的打印选项，当点击我打电话打印功能。该函数复制相关的（不是全部）html。用css和图片打开新窗口

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 ... />插入新窗口的头部？

谢谢！

来源

2012-07-26 zanegray

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

来源

2012-07-26 23:06:18 ocanal

这个工作原理除了原来的网页现在缺少'link'，'style'和'script'的内容（或者至少这是firefox 10.0.6的行为）。我试过这个：'$（this）.clone（）。appendTo（$（printWindow.document.head））;'但没有雪茄。 – zanegray 2012-07-27 16:05:12

@ zanegray，是的，你是对的，克隆的元素必须附加。我改变了它，现在看起来运行良好（对于所有浏览器）。 – ocanal 2012-07-27 17:14:46

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

当你写一个文件到它，你必须写在<link>标签，<script>标签，和其他所有的东西。

来源

2012-07-26 22:57:02 Pointy

这个答案比被接受的答案更容易理解，也更简单。人们需要对JavaScript不太满意！ – 2012-07-27 17:24:42

动态插入链接到现有的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 - 大约有其他一些有趣的技巧直接操作样式表

来源

2014-08-19 16:06:35

用css和图片打开新窗口

回答

相关问题