2011-04-06 11 views
2

window.printが開始される前にコンテンツが切り替わるjavascript関数を作成しようとしていて、そのページがプリンタに送信された後にコンテンツを元に戻します。 document.body.onfocusを試してみましたが、一部の印刷方法(PDFへの印刷など)は、実際にページが印刷される前にフォーカスをbodyに戻して、意図した内容を元の内容に置き換えます。ここでjavascriptを使用してページをプリンタに送るのを聞く方法はありますか?

は私が現時点で持っているもので、どこ私は、私は必要だと思うリスナーが収まるでしょう:

function printNewContent() { 
      var title = document.getElementById("OriginalTitle"); 
      var secondtext = document.getElementById("TextBlock2"); 
      var copy = document.getElementById("StandardCopy"); 
      var origtitle = title.innerHTML; 
      var origcopy = copy.innerHTML; 
      var newcopy = document.getElementById("NewCopy").innerHTML; 

      title.innerHTML = "New Title"; 
      copy.innerHTML = newcopy; 
      secondtext.className = "displayNone"; 
      window.print(); 

      //Listen for page to be sent to the printer 

      title.innerHTML = origtitle; 
      copy.innerHTML = origcopy; 
      secondtext.className = "PrintOnly SecondTxt"; 
     } 

私はonfocusアプローチと連動して遅延を使用しますが、それは誰にでもできる方法ではありません私は可能な限り安定した一貫性のあるものを探しています。どんな提案も大歓迎です。ありがとう!

答えて

3

別のアプローチは、それがされていたときにあなたのサイト上/非表示のコンテンツを表示するためにCSS media queryを使用することです印刷されます。これは、印刷する前にDOMを操作しようとするよりもはるかに優れたアプローチです。

たとえば、画面に表示されたときにWebページに1つの要素が表示されるようにしたい場合、その要素が表示されたら非表示にして別の要素を表示するとします。スクリーン版と印刷版のHTMLを前もってレンダリングする必要があります。

マークアップ:

<div class="screen"> 
    This is the stuff normal users will see. 
</div> 
<div class="print"> 
    This is the stuff that will be printed. 
</div> 

CSS:

.print { display: none; } 
@media print 
{ 
    .print { display: block; } 
    .screen { display: none; } 
} 
1

IEは、すでに以前の日からonafterprintを持っています。
HTML5では、onafterprintも非IEブラウザ用のイベントになりました。
MDCおよびW3C Specificationについては、onafterprintを参照してください。

関連する問題