How to preview a style before print dialog?

I'm trying to show a preview of the print-styled page before the print dialog, by applying the print stylesheet to the screen stylesheet.

This doesn't work:

$('link[media*="screen"]').attr("href",url+"css/print/default.css");
wi开发者_开发技巧ndow.print();

But with an alert() before the print(), it DOES work:

 $('link[media*="screen"]').attr("href",url+"css/print/default.css");
 alert("Ok?");
 window.print();

Any hints?

This function delays execution of window.print a few seconds (delay parameter, default about 5 seconds):

function doPrint(delay){
 delay = delay || 5; //default to 5 seconds
 $('link[media*="screen"]').attr("href",url+"css/print/default.css");
 setTimeout(function(){window.print();},delay*1000);
}

You could also restore the original css after the print dialog by putting the reverse of $('link[media*="screen"]').attr("href",url+"css/print/default.css"); into the function called from setTimeout.

Don't call window.print() until you want to show the print dialog. Add another button to the page which the user can press to open the print dialog (this button may be hidden by default, shown when you show the preview, but don't forget to hide it again when printing!).

It takes time to load a stylesheet. Without the alert, you are calling print before enough time has passed for the stylesheet to be loaded.

Any hints?

Browsers have built in print and print preview functions. Avoid wheel reinvention.