web-dev-qa-db-ja.com

JQueryを使用してポップアップウィンドウを開き、印刷する

しばらく前に、jQueryを使用して、リンクで指定されたURLをライトボックスにロードするライトボックスプラグインを作成しました。コードは本当に簡単です：

$('.readmore').each(function(i){
    $(this).popup();
});

リンクは次のようになります。

<a class='readmore' href='view-details.php?Id=11'>TJ Kirchner</a>

プラグインは、幅、高さ、異なるURL、および通過するデータの引数を受け入れることもできます。

私が今直面している問題は、ライトボックスの印刷です。ライトボックスの上部に印刷ボタンがあるように設定しました。そのリンクは新しいウィンドウを開き、そのウィンドウを印刷します。これはすべてライトボックスプラグインによって制御されています。コードは次のようになります。

$('.printBtn').bind('click',function() {
    var url = options.url + ( ( options.url.indexOf('?') < 0 && options.data != "" ) ? '?' : '&' ) + options.data;
    var thePopup = window.open( url, "Member Listing", "menubar=0,location=0,height=700,width=700" );
    thePopup.print();
});

問題は、ウィンドウがロードされるまでスクリプトが待機していないように見えることです。ウィンドウが表示された瞬間に印刷したい。その結果、印刷​​ダイアログボックスで「キャンセル」をクリックすると、ウィンドウがロードされるまで何度もポップアップします。初めて印刷しようとしたときに、空白のページが表示されました。これは、ウィンドウがロードを完了しなかったためかもしれません。

ウィンドウがロードされてから印刷されるまで待機するように、以前のコードブロックを変更する方法を見つける必要があります。これを行う簡単な方法があるはずですが、まだ見つかりませんでした。それとも、ポップアップウィンドウのWebページコードを変更せずに、ポップアップウィンドウを開いて親ウィンドウのライトボックススクリプトから印刷するより良い方法を見つける必要があります。

javascriptjqueryprintingpopuplightbox
14
TJ Kirchner

View-details.phpファイルにprint関数を配置し、ファイルがロードされたら、次のいずれかを使用して呼び出します。

<body onload="window.print()">

または

$(document).ready(function () { 
  window.print(); 
});
28
Ivo Sabev

とった！ここでアイデアを見つけました

http://www.mail-archive.com/[email protected]/msg18410.html

この例では、空のポップアップウィンドウをオブジェクトにロードし、表示する要素のコンテンツのクローンを作成し、それをオブジェクトの本文に追加しました。 view-details（またはライトボックスに読み込むページ）の内容がすでにわかっているので、代わりにその内容を複製してオブジェクトに読み込むだけで済みました。次に、そのオブジェクトを印刷する必要がありました。最終結果は次のようになります。

$('.printBtn').bind('click',function() {
    var thePopup = window.open( '', "Customer Listing", "menubar=0,location=0,height=700,width=700" );
    $('#popup-content').clone().appendTo( thePopup.document.body );
    thePopup.print();
});

View-details.phpで使用していたスタイルシートが相対リンクを使用していたという1つの小さな欠点がありました。絶対リンクに変更する必要がありました。その理由は、ウィンドウにURLが関連付けられていないため、描画する相対的な位置がなかったためです。

Firefoxで動作します。他の主要なブラウザでもテストする必要があります。

画像、ビデオ、またはその他のプロセス集約型ソリューションを扱っているときに、このソリューションがどの程度うまく機能するかはわかりません。ただし、テーブルとテキスト値を読み込んでいるだけなので、私の場合はかなりうまくいきます。

入力いただきありがとうございます！あなたはこれを回避する方法についていくつかのアイデアをくれました。

7
TJ Kirchner

ポップアップウィンドウでHTMLを変更することはできませんか？

可能であれば、ポップアップのHTMLのendに_<script>_タグを追加し、その中でwindow.print()を呼び出します。その後、HTMLがロードされるまで呼び出されません。

0
Stuart Sierra