Печать содержимого динамически созданного iframe из родительского окна

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

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

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

Ответы

Ответ 1

Предположим, что это ваш iframe выглядит следующим образом:

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

Вот как вы это делаете, используя jQuery:

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

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

document.getElementById("print-iframe").contentWindow.print();

Ответ 2

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

Ответ 3

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

function PrintIframe() { 

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

Это сработало для меня

ИЗМЕНИТЬ Странно - у меня было предупреждение в моем тестовом коде, который, похоже, заставляет его работать. Когда я понял, это не сработало. Извините: (

В любом случае, это должно сделать это, используя 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>

Ответ 4

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

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

Ответ 5

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

Ответ 6

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();
}

Ответ 7

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

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

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

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

twigstechtips

Ответ 8

Я знаю, что это довольно старый поток, но для этого у меня есть еще одно средство для борьбы с грязью.

Это основано на fooobar.com/info/289621/... и fooobar.com/info/289621/...

Я добавил функцию .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" />