印刷用バージョンが動作しない

Question

興味深いブラウザの問題にぶつかる - jQueryを実装して、通常のビューのCSSファイルと印刷用のCSSファイルの間でボタンをクリックすると、ページのスタイルシートリンクhrefを切り替えます。これは、ビューアが印刷用のバージョンに行くときに、新しいリンクhrefが適用された後にwindow.print（）を呼び出すことを除いて、機能します。印刷プレビューが自動的に表示され、プレビューでは、印刷バージョンにdisplay：noneが必要な特定の要素が表示されます。 「印刷」をクリックすると、プレビューと同じように、印刷がうまくいきません。印刷をキャンセルすると、画面上のページはまだ印刷に適していますが、すべてが問題なく表示されません。右クリックして[印刷...]を選択すると、プレビューが表示され、必要なものがすべて印刷されます。

これはChromeでのみ起こっているため、FFではないため、ブラウザのものでなければなりません。

これは、ボタンがクリックされるたびに呼び出される関数です。

$('#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(); 
    } 

一つの解決策は）（window.printの呼び出しを取ることです。 1つのボタンでページを印刷に適したモードにしてから、実際にページを印刷するためにユーザーがクリックしなければならない別のボタンをクリックするだけです。しかし、私はそれを可能な限りワンクリックプロセスに保つことを望んでいます。

Answer 1

私は、CSSファイルへのリンク方法を放棄することをお勧めします。代わりに、あなたのCSSに@media print { ... }宣言を使ってみてください。このブロック内にあなたのプリント特有のスタイリングを含めてください。 https://developer.mozilla.org/en-US/docs/Web/CSS/@mediaに素晴らしい文書があります。

Answer 2

私はsetTimeout（）を使用するだけで問題を解決しました。私は、競合状態またはそのようなことがあります考え出したので、私はちょうど100ミリ秒（）window.printの呼び出しを遅らせる：私は実際にはその前に試してみました

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

、私は忘れて、以下のようにそれをコード化されていますコードが遅延した後に実行されるようにすることは、他のそれはすぐに呼び出され、括弧なしのコールバック関数としてのsetTimeout（）に渡される必要がある。提案のための

setTimeout(window.print(), 100);