Druckfreundliche Version funktioniert nicht

Question

In ein interessantes Browser-Problem - Ich habe jQuery implementiert, um die Stylesheet-Verknüpfung href einer Seite auf Knopfdruck zwischen einer normalen CSS-Ansichtsdatei und einer druckfreundlichen CSS-Datei umzuschalten. Es funktioniert, außer dass, wenn der Betrachter in die druckfreundliche Version geht, ich window.print() aufrufe, nachdem der neue Link href angewendet wurde. Die Druckvorschau wird automatisch angezeigt, und in der Vorschau werden bestimmte Elemente angezeigt, die angezeigt werden sollen: Keine in der Druckversion sind sichtbar. Wenn Sie auf "Drucken" klicken, wird der Ausdruck wie in der Vorschau angezeigt. Wenn Sie den Druckvorgang abbrechen, befindet sich die Seite auf dem Bildschirm immer noch im druckfreundlichen Modus, aber alles ist in Ordnung und nichts ist sichtbar, was nicht sein sollte. Und wenn Sie dann mit der rechten Maustaste klicken und "Drucken ..." wählen, wird die Vorschau wie gewünscht angezeigt und alles druckt so wie es sollte.

Dies muss eine Browser-Sache sein, weil es nur in Chrome passiert, nicht in FF.

Dies ist die Funktion, die aufgerufen wird, wenn die Schaltfläche geklickt wird:

$('#printOnlyBtn').click(function(){ 
    if ($('#mainStylesheetLink').attr('href') == 'normal.css' { 
     //switch to print-friendly css file and print 
     doPrint(); 
    } 
    else { 
     //switch back to normal css file 
     $('#mainStylesheetLink').attr('href', 'normal.css'); 
    } 
}); 

function doPrint(){ 
    $('#mainStylesheetLink').attr('href', 'printFriendly.css'); 
     window.print(); 
    } 

Eine Lösung ist, den Anruf anzunehmen, um zu window.print(); Legen Sie einfach die Seite mit einer Taste in den druckfreundlichen Modus, und klicken Sie dann auf eine weitere Schaltfläche, auf die der Benutzer klicken muss, um die Seite tatsächlich zu drucken. Aber ich würde es bevorzugen, wenn möglich einen Ein-Klick-Prozess zu behalten.

Answer 1

Ich würde empfehlen, Ihren Ansatz der Verknüpfung zu einer CSS-Datei aufzugeben. Versuchen Sie stattdessen, eine @media print { ... } Deklaration in Ihrem CSS zu verwenden. Fügen Sie Ihr druckspezifisches Styling in diesen Block ein. Es gibt eine großartige Dokumentation unter https://developer.mozilla.org/en-US/docs/Web/CSS/@media.

Answer 2

Ich löste das Problem nur mit setTimeout(). Ich dachte, es gibt eine Race-Bedingung oder so ähnlich, so dass ich verzögert nur den Anruf (auf window.print) von 100 ms:

function doPrint(){ 
    $('##mainStylesheetLink').attr('href', '#printFriendly.css'); 
    setTimeout(window.print, 100); 
} 

Ich versuchte wirklich, dass vor, aber ich codierte es wie unten, zu vergessen, dass die Code nach Verzögerung ausgeführt werden muss in setTimeout() als Callback-Funktion übergeben werden, ohne dass die Pars, sonst sofort aufgerufen wird:

setTimeout(window.print(), 100);