web-dev-qa-db-ja.com

親ウィンドウから動的に作成されたiframeのコンテンツを印刷する

リンクのリストを含むページと、リンク先のページのプレースホルダーとして機能するdivがあります。ユーザーがリンクをクリックするたびに、divにiframeが作成され、そのsrc属性がlink href属性の値を取得します-シンプルで明確な、外部Webページギャラリーのようなものです。 iframeのコンテンツの印刷に問題があります。これを行うには、次のコードを使用します。

 function PrintIframe（）
 {
 frames ["name"]。focus（）; 
フレーム["名前"] .print（）; 
}

問題は、iframeがJQueryによって動的に作成されることです。HTMLコードにiframeを挿入すると、ブラウザーは外部ページを正しく印刷します。しかし、JavaScriptによって挿入された同じコードでは何も起こりません。 「印刷」リンクでJQ 1.3の「ライブ」イベントを使用しようとしましたが、成功しませんでした。これを克服する方法はありますか？

jqueryiframeprinting
17
certainlyakey

これがあなたのiframeが次のようになっているとします：

<iframe id='print-iframe' name='print-frame-name'></iframe>

これは、jQueryを使用して行う方法です。

$("#print-iframe").get(0).contentWindow.print();

これは、ネイティブJavaScriptを使用して行う方法です。

document.getElementById("print-iframe").contentWindow.print();
33
Fareed Alnamrouti

Iframeのコンテンツの印刷に問題がありました。これを実現するには、以下のコードを使用します。

たとえば、iframeがあるとします。

<iframe id='print-iframe' name='print-iframe'></iframe>

次に、jsがiframeのコンテンツを印刷するためにこの関数を呼び出します（ieと他のブラウザーの両方で機能します）。

printIframe('print-iframe');

関数のコード：

function printIframe(iFrameId) {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf ("MSIE ");
    var iframe = document.getElementById(printFrameId);

    if (msie !== 0) {
        iframe.contentWindow.document.execCommand('print', false, null);
    } else {
        iframe.contentWindow.print();
    }
}
9
Yuri

私はこれを試し、問題を再現することができました。私が気付いたのは、print関数を呼び出すときにiframeの読み込みが完了していないことです。 PrintIFrame（）を呼び出すときにinnerHTMLの値をチェックすることで、これをテストしました。これを克服するには、setTimeOutを使用して、xミリ秒後に関数を再度呼び出します。

function PrintIframe() { 

        if (window.frames['myname'].innerHTML != "") {
            window.frames['myname'].focus();
            window.frames['myname'].print();
        } else {
            setTimeout(PrintIframe,1000);
        }    
    }

これは私のために働いた

[〜＃〜] edit [〜＃〜]奇妙な-テストコードに警告が表示され、機能しているようです。取り出した時、動かなかった。ごめんなさい ：（

とにかく、これはjQueryを使用してiframeにロードイベントハンドラーをアタッチすることで行う必要があります。私はIE8でテストしましたが動作します：

<html>
<head>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    function loadiFrame(src)
    {
        $("#iframeplaceholder").html("<iframe id='myiframe' name='myname' src='" + src + "' />");
    }

    $(function()
    {
        $("#printbutton").bind("click", 
            function() { 
                loadiFrame('test.aspx'); 
                $("#myiframe").load( 
                    function() {
                        window.frames['myname'].focus();
                        window.frames['myname'].print();
                    }
                 );
            }
        );
    });
    </script>    
</head>
<body>
    <input type="button" id="printbutton" value="Load iFrame" />
    <div id="iframeplaceholder"></div>
</body>
</html>
8
Temple

私はこれがウェブを検索しているのを見つけました

$('#preview-iframe').contents().find('html').html(data);

そしてそれを

$('#preview-iframe').contents().find('html').html(data).after(function() {
    document.getElementById("preview-iframe").contentWindow.print();
});

twigstechtips

0
blomman9

たぶん、同じドメインの制限がJavaScriptの実行を妨げています。同じドメインの制限により、フレームA（またはメインウィンドウ）のJavaScriptは、AとBが同じドメインからのものである場合、フレームBと（.print（）などの）相互作用することができます。 JavaScriptエラーコンソールを確認してください。セキュリティ例外/許可エラーのようなものを受け取った場合、それはおそらく同じドメインの制限が原因です。

0
pts

私はこれがかなり古いスレッドであることを知っていますが、これに対してより堅牢な解決策があります。

https://stackoverflow.com/a/9648159/3183069 および https://stackoverflow.com/a/831547/3183069 に基づいています

印刷をキャンセルしても無限にループしないように.one（）関数を追加しました！ iframeも1回ロードします。楽しい

var $body = $("body"),
  $iframe,
  loadiFrame = function(src) {
    if ($body.children('#full-prog').length == 0) {
      $body.append("<iframe id='full-prog' src='" + src + "' />");
      $iframe = $("#full-prog");
      $iframe.one('load', function() {
        $iframe.get(0).contentWindow.print();
      });
    } else {
      $iframe.get(0).contentWindow.print();
    }
  };

$("#printbutton").click(function() {
  loadiFrame('iframe source here');
});
#full-prog {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="printbutton" value="Load iFrame" />
0
Kiwad
var ifrm = document.createElement("iframe");
// ifrm.style.display = "none";
document.body.appendChild(ifrm);
setTimeout(function() {
    $(ifrm).contents().find("body").html("my html content");
}, 1);
ifrm.onload = function() {
    ifrm.contentWindow.print();
}
0
Igor Parra

うーん、これは正しいですか？あなただけのIFrameがつながる場所のソースを変更する必要がありますか？

$("#iframe").attr("src", "http://www.example.com");
0
Ólafur Waage

これはかなり古いスレッドですが、これに対する1つの実用的な解決策を見つけました。

空のウィンドウを印刷しないようにjqueryにスリープを追加しました。新しく置き換えられたコンテンツをリロードするのに数秒かかります。

$('#printiframe').attr('src', pdf_file_path);
setTimeout(function () {
     $("#printiframe").get(0).contentWindow.print();
}, 500);
0
Amit Gupta