I am doing a simple print option that when click I call a print function. The function copies over the relevant (not all of it) 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 I have is that this new window doesn't seem to be able to reference my css stylesheet or my pictures that are within the folder. Any ideas? Just focusing on the css issue, would it be possible to insert a <link ... /> into the head of the new window?

Thanks!

I am doing a simple print option that when click I call a print function. The function copies over the relevant (not all of it) 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 I have is that this new window doesn't seem to be able to reference my css stylesheet or my pictures that are within the folder. Any ideas? Just focusing on the css issue, would it be possible to insert a <link ... /> into the head of the new window?

Thanks!

• javascript
• jquery
• html
• css
• image

3 Answers 3

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

It's a totally new window. It has to have its own CSS etc.

When you write a document into it, you have to write in the <link> tags, <script> tags, and everything else like that.

To dynamically insert a link to an existing CSS stylesheet into the head of the new window this worked well for me:

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

Source: Totally Pwn CSS with Javascript - Has some other interesting tricks around direct manipulation of a stylesheet