Open a new window with css and images

Question

I am making a simple print option, which, when pressed, calls the print function. The function copies according to the corresponding (not all) 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); } 

The problem is that this new window doesn't seem to be able to link to my CSS stylesheet or my photos that are inside the folder. Any ideas? Just by focusing on the css issue, is it possible to insert <link ... /> at the beginning of a new window?

Thanks!

Answer 1

 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 2

This is a brand new window. It should have its own CSS, etc.

When you write a document into it, you must write <link> tags, <script> tags and everything else.

Answer 3

To dynamically insert a link into an existing CSS stylesheet at the beginning of a new window, this worked for me:

 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: Fully Pwn CSS with Javascript - There are some other interesting tricks around direct styling.