2017-07-03 10 views
2

私はこれはiFrameを作成するのiFrameiFrameをスタイルシートで印刷するには?

function (data) { 
    var frame = $("<iframe>", { 
     name: "iFrame", 
     class: "printFrame" 
    }); 

    frame.appendTo("body"); 

    var head = $("<head></head>"); 

    _.each($("head link[rel=stylesheet]"), function (link) { 
     var csslink = $("<link/>", { rel: "stylesheet", href: $(link).prop("href") }) 
     head.append(csslink); 
    ;}); 

    frame.contents().find("head") 
     .replaceWith(head); 

    frame.contents().find("body") 
     .append(this.html()); 

    window.frames["iFrame"].focus(); 
    window.frames["iFrame"].print(); 
} 

からデータを印刷するには、このコードを作成しましたが、それはこのウェブサイトのために必要とされるすべてのCSSのリンクを設定した場所に頭を追加します。その後、ボディを作成します。

frame.contents()。find( "head")。replaceWith(head)という行でブレークしない限り、スタイリングはプリントに適用されません。非同期に実行されています。

質問:私は何とかその行を実行する前に少し待っているコードを手に入れることができますか?これを行う別の方法がありますか?残念ながら私はiFramesに精通しているわけではないので、そこで何をしようとしているのか分かりません。

+0

https://stackoverflow.com/questions/9616426/javascript-print-iframe-contents-only –

+1

@SagarSinhaは、そのページをリンクすることで何をしたいのかよく分かりません。おそらく、あなたが参照しようとしているスレッドのどの部分についてもっと説明したりコメントしたりできますか? – Hofftari

答えて

0

これは本当に面倒なことでした。私はいつもiframeの使用に嫌気がしていましたが、iframeを使って画面上のものよりも多くのものを印刷すると、試してみると分かりました。

これは、隠しdivの中にデータを入れて、window.print()の前に表示して解決しました。同時に、ページ上の他のすべての要素には、印刷用の要素を隠すために既に使用しているクラスである「隠しプリント」クラスが与えられました。

これはユーザーにとってはあまり優雅ではないかもしれません(ユーザーが印刷ダイアログを終了する前にdivが短時間表示されます)が、より簡単に使用して管理する方法です。

1

最後のfocus()とprint()をiframeのonloadハンドラに移動して、スタイルをロードして適用した後に呼び出すことができると思います。

+0

iframeの処理をオンロードする方法について少し説明できますか?より正確には、実際にiframeを作成する方法は、ドキュメント全体ではなくハンドラを取得する方法です。 – Hofftari

0

私はちょうど同じ問題に遭遇して、次のようにやってきました:

setTimeout(() => { 
    window.frames["iFrame"].focus(); 
    window.frames["iFrame"].print(); 
}, 500) 

これは私のためにそれをソートしているように見えます。私はタイムアウトを使用して嫌い、長さは最高の仕事を推測されますが、それは私が今実行することができる何かのシステムクリティカルではないので。

関連する問題