6

[この質問の簡略版： ]

iFrameが印刷を拒否することがあるのはなぜですか？たとえば、print preview次の2つのページにアクセスします。

  1. http://fiddle.jshell.net/gJDv4/1/show/
  2. http://fiddle.jshell.net/gJDv4/2/show/

印刷プレビューでは、iFrameは最初の例では表示されていますが、2番目の例では非表示になっています。1番目と2番目のiFrameの唯一のコードの違いは、CSSプロパティ（）が2番目の例のiFrameに追加されていることです。margin: 20px;

[長い（元の）バージョン： ]

独自のスタイルシートとjavascriptファイルを参照する独立したHTMLファイルの束を組み立てるプレビュー/印刷ページを作成しています。

アイデアは、すべてのファイルがプレビュー用にiFrameに表示され、印刷されると、各iFrame（複数のページにまたがる可能性が高い）がそれ自体のドキュメントであるかのように印刷されるというものです。

ただし、iFrameを印刷（または印刷プレビュー）すると、コンテンツが表示されないか、最初のページのみが印刷され、iFrameの残りのページが切り捨てられます。

iFrameは、複数のページを作成する前に、問題なく印刷（および印刷プレビュー）されました。

この動作の理由は何ですか？

4

2 に答える 2

4

print()ウィンドウで関数を呼び出すことにより、個々のiframeでドキュメントを印刷できます。

したがって、ファイル2を印刷するには次のようにします。

$('#iframeTwo')[0].contentWindow.print()

そしてここに、個々のプリントをトリガーするボタンを追加したjsfiddle ...

http://jsfiddle.net/sg3s/GJKkm/17/

親ドキュメントを印刷するときにブラウザがiframe内のコンテンツを印刷しない理由については。おそらく、それらのドキュメントが実際には表示されているドキュメントの一部ではないという事実と関係があります...別のウィンドウ（window.open()jsで生成できるウィンドウ）のように考えてくださいが、メインに巧みにハッキングされていますビューポートがiframeで指定されているものに制限されたドキュメント。

于 2012-06-07T20:24:58.140 に答える
2

私はそれを解決する方法を思いついた。

目的は、javascriptを使用してDOMを操作することにより、すべてのiframeのコンテンツを親ウィンドウに取り込むことです。

このソリューションを使用すると、1ページを超える場合にiframeが途切れる問題を回避することもできます。

コードは次のとおりです。

<script>

 pages =[] // initiate an empty list here

function printPage() {

var frames = document.getElementsByTagName('iframe');
// get all the iframes and loop over them
// then push their innerHTML into the list
for (var i = 0; i < frames.length; i++){ 
   pages.push(frames[i].contentWindow.document.body.innerHTML); 
;
}
if (pages && pages.length) {

// this if statement, just checks to ensure our list is not empty before running the code.

// here is the magic, we now set the parent window to be equal to all the concatenated iframes innerHTML
window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the iframes
window.print();
} 
else {
// do nothing
}


}
</script>

これにより、すべてのiframeを印刷するための印刷ダイアログボックスが1つだけ表示されます。

親ページのHTMLには、printPage関数を呼び出すための以下のコードがあることに注意してください。

<input type="submit" value="Print All"
  onclick="javascript:printPage()"
 />
于 2020-05-31T23:05:40.647 に答える