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

Share Improve this question Follow edited Jul 27, 2012 at 16:06 zanegray asked Jul 26, 2012 at 22:56 zanegrayzanegray 76877 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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