Печать содержимого динамически созданного iframe из родительского окна - PullRequest
17 голосов
/ 06 мая 2009

У меня есть страница со списком ссылок и div, который служит заполнителем для страниц, на которые ведут ссылки. Каждый раз, когда пользователь нажимает на ссылку, iframe создается в div, и его атрибут src получает значение атрибута link href - простой и понятный, своего рода галерея внешних веб-страниц. У меня проблема с печатью содержимого iframe. Для этого я использую этот код:

function PrintIframe()  
{  
frames["name"].focus();  
frames["name"].print();  
}

Проблема, похоже, заключается в том, что iframe создается динамически JQuery - когда я вставляю iframe прямо в HTML-код, браузер печатает внешнюю страницу в полном порядке. Но с тем же кодом, введенным JavaScript, ничего не происходит. Я пытался использовать JQ 1.3 «живое» событие по ссылке «Печать», но безуспешно. Есть ли способ преодолеть это?

Ответы [ 9 ]

31 голосов
/ 10 марта 2012

Предположим, что так выглядит ваш iframe:

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

Вот как вы делаете это с помощью jQuery:

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

и вот как вы делаете это, используя собственный JavaScript:

document.getElementById("print-iframe").contentWindow.print();
8 голосов
/ 28 октября 2013

У меня была проблема с печатью содержимого 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();
    }
}
8 голосов
/ 07 мая 2009

Я попробовал это и смог повторить проблему. Что я заметил, так это то, что при вызове функции печати iframe еще не загружен. Я проверил это, проверив значение innerHTML при вызове PrintIFrame (). Чтобы преодолеть это, вы можете использовать setTimeOut для повторного вызова функции через миллисекунды:

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>
0 голосов
/ 23 марта 2018

Это довольно старая тема, но я нашел одно рабочее решение для этого.

Я добавил sleep в jquery, чтобы он не печатал пустое окно, для перезагрузки недавно замененного содержимого требуется несколько секунд.

$('#printiframe').attr('src', pdf_file_path);
setTimeout(function () {
     $("#printiframe").get(0).contentWindow.print();
}, 500);
0 голосов
/ 04 октября 2017

Я знаю, что это довольно старая тема, но у меня есть более грубое решение для этого.

Он основан на https://stackoverflow.com/a/9648159/3183069 и https://stackoverflow.com/a/831547/3183069

Я добавил функцию .one (), чтобы она не зацикливалась, если вы отмените печать! Я также загружаю iframe один раз. Наслаждайтесь

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 голосов
/ 10 декабря 2012

Я нашел этот поиск в Интернете

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

и изменил его на

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

twigstechtips

0 голосов
/ 09 декабря 2012
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 голосов
/ 06 мая 2009

Возможно, ограничение того же домена препятствует выполнению вашего JavaScript. Ограничение того же домена позволяет JavaScript во фрейме A (или главном окне) взаимодействовать (например, .print ()) с фреймом B, если A и B находятся в одном и том же домене. Проверьте консоль ошибок JavaScript. Если вы получаете что-то вроде ошибки исключения / разрешения безопасности, то это, скорее всего, из-за ограничения того же домена.

0 голосов
/ 06 мая 2009

Хм, я правильно понял? Вам нужно только изменить источник, к которому ведет IFrame?

$("#iframe").attr("src", "http://www.example.com");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...