2017-02-01 3 views
0

私たちの会社では、これ以上ない元同僚から次のコードが見つかりました:私は、我々のコードでsetTimeout通話の量を減らしたいこのsetTimeoutをwindow.open()の後に削除できますか?

var w = window.open('', 'print_window', 'width = 1000, height = 1000'); 
    w.document.write('<html><head><title>Printout</title>' + '<link rel="stylesheet" href="' + document.styleSheets[0].href + '"></head><body>'); 
    w.document.write(modal.dom.root.innerHTML); 
    w.document.write('</body></html>'); 

    setTimeout(function() { 
     $(w.document.body).find('.modal-print').remove(); 
     w.document.close(); 
     w.focus(); 
     w.print(); 
     w.close(); 
    }, 500); 

を、ここでsetTimeoutがある理由を疑問に思いました。私はそれを削除したいと思いますが、私はそれが最初に追加された理由があると思います。誰もがなぜそこに存在する可能性があるのか​​を知っていますか?それが安全に削除できるのであれば、コードはこのように見えますか?

var w = window.open('', 'print_window', 'width = 1000, height = 1000'); 
    w.document.write('<html><head><title>Printout</title>' + '<link rel="stylesheet" href="' + document.styleSheets[0].href + '"></head><body>'); 
    w.document.write(modal.dom.root.innerHTML); 
    w.document.write('</body></html>'); 

    $(w.document.body).find('.modal-print').remove(); 
    w.document.close(); 
    w.focus(); 
    w.print(); 
    w.close(); 

私は、スタイルシートが読み込まれるのを待っていると思います。したがって、新しいウィンドウにコードを追加する前にwindow.open()が呼び出されてから、スタイルシートが追加された後にこれらのイベントが発生するかどうかわかりませんが、DOMの準備完了イベントまたはロードイベントを待つのは良いでしょう。

readyイベントのバージョン:ロード・イベントと

var w = window.open('', 'print_window', 'width = 1000, height = 1000'); 
    w.document.write('<html><head><title>Printout</title>' + '<link rel="stylesheet" href="' + document.styleSheets[0].href + '"></head><body>'); 
    w.document.write(modal.dom.root.innerHTML); 
    w.document.write('</body></html>'); 

    // Will ready event be fired? If yes, at the right time? 
    $(w.document).ready(function() { 
     $(w.document.body).find('.modal-print').remove(); 
     w.document.close(); 
     w.focus(); 
     w.print(); 
     w.close(); 
    }); 

バージョン:

var w = window.open('', 'print_window', 'width = 1000, height = 1000'); 
    w.document.write('<html><head><title>Printout</title>' + '<link rel="stylesheet" href="' + document.styleSheets[0].href + '"></head><body>'); 
    w.document.write(modal.dom.root.innerHTML); 
    w.document.write('</body></html>'); 

    // Will ready event be fired? If yes, at the right time? 
    $(w).load(function() { 
     $(w.document.body).find('.modal-print').remove(); 
     w.document.close(); 
     w.focus(); 
     w.print(); 
     w.close(); 
    }); 
+4

なぜテストしないのですか? –

+0

@JonasGiuro私は現在、onloadのバージョンを試していますし、実装をテストするためにQAに依頼します。しかし、私はおそらく、SOの誰かがこれについての経験を既に持っていて、それがベストプラクティスであるかどうかを知っていると思いました。また、さまざまな環境のユーザーが異なる結果をもたらす可能性があることを心配しています。彼らのコンピュータが私たちがテストするのに使うものよりも遅いならば。 – Timo

+0

は、そのウィンドウが開くのに時間がかかります – charlietfl

答えて

0

参考まで。私たちは同じ問題に直面した後に使用してしまった私は私のコメントで述べたコードは:

function printHTML(html) { 
    var tab, 
     interval; 
    if (html) { 
     tab = window.open($.ajax.host + $.ajax.directory + 'dist/res/print.html'); 
     interval = setInterval(function() { 
      var body; 
      // loop until the tab is opened, the tab has a document and the DOM has been parsed and is ready to be query'ed. 
      if (tab && tab.document && tab.document.querySelector) body = tab.document.querySelector('body'); 
      if (body) { 
       body.innerHTML = html.outerHTML; 
       timeout again for the print function, so that the body has time to do a paint + reflow, so we are sure that the html has been written to the new tab. 
       setTimeout(function() { 
        // print and clean up 
        tab.print(); 
        tab.close(); 
        clearInterval(interval); 
       }, 1) 
      } 
     }, 100); 
    } 
    else throw new Error("This report doesn't have a print version."); 
} 
0

代わりにそれが印刷される前のセクションを削除するsetTimeoutを使用するのでは、なぜ文書に次のスタイルを追加しません。 ..

<style media="print"> 
    .modal-print { 
    display: none; 
    } 
</style> 

これは、セクションを削除するのではなく隠すことになりますが、必要なのはこれだけです。

また、それはすべてあなたが作成したドキュメント内になるので、あなたは、まったくsetTimeoutを必要としない...

<script> 
    window.print(); 
    window.close(); 
</script> 

を追加することができます。

+0

'media =" print "は常に非表示にする必要はありません。これは印刷時に非表示にするだけです。 –

+0

これは実際には静的なページには完璧ですが、単一ページのアプリケーションでは混乱を招きます。あなたが気をつけていないなら、あなたは変化する状態にアプリを誘惑するかもしれません。 – Shilly

関連する問題