Printing contents of a dynamically created iframe

I have a page with a list of links and a div which serves as a placeholder for the pages the links lead to. Everytime user clicks on a link an iframe is created in the div and its src attribute gets the value of the link href attribute - simple and clear, sort of external web pages gallery. What i do have a problem with is printing the contents of the iframe. To do this i use this code:

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

The issue seems to be that iframe is created dynamically by JQuery - when I insert an iframe right into the html code, the browser prints the external page all right. But with the same code injected by JavaScript nothing happens. I tried to use JQ 1.3 'live' event on "Print" link, no success. Is there a way to overcome this?

标签： jquery iframe printing

9条回答

可以哭但决不认输i

2楼-- · 2019-01-14 07:53

I've had an issue with printing iframe's content. In order to achive this, use code below:

For example you have iframe:

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

Then js to print iframe's content call this function (works both in ie and other browsers):

printIframe('print-iframe');

Function's code:

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

0人赞添加讨论(0) 举报

再贱就再见

3楼-- · 2019-01-14 07:53

Maybe the same-domain restriction prevents your JavaScript from executing. The same-domain restriction allows JavaScript in frame A (or the main window) to interact (such as .print()) with frame B if A and B are from the same domain. Check your JavaScript error console. If you get something like a security exception / permission error, then it is most probably because of the same-domain restriction.

0人赞添加讨论(0) 举报

乱世女痞

4楼-- · 2019-01-14 07:55

I tried this and was able to replicate the issue. What i noticed was that when calling the print function the iframe hadn't completed loaded. i tested this by checking the value of innerHTML when calling PrintIFrame(). To overcome this, you can use setTimeOut to call the function again x milliseconds later:

function PrintIframe() { 

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

This worked for me

EDIT Strange - i had an alert in my test code which seems to make it work. When i took it out, it didn't work. Sorry :(

Anyway, this should do it using jQuery to attach a load event handler to the iframe. I have tested on IE8 and it works:

<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人赞添加讨论(0) 举报

我欲成王，谁敢阻挡

5楼-- · 2019-01-14 07:56

Hmm do I get this right? You only need to change the source of where the IFrame leads to?

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

0人赞添加讨论(0) 举报

Luminary・发光体

6楼-- · 2019-01-14 07:58

I know this is a pretty old thread but I have a more rubust solution for this.

It's based on https://stackoverflow.com/a/9648159/3183069 and https://stackoverflow.com/a/831547/3183069

I added .one() function so it doesnt loop infinitely if you cancel the print! I also load the iframe once. Enjoy

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人赞添加讨论(0) 举报

狗以群分

7楼-- · 2019-01-14 08:02

Suppose that this is what your iframe looks like:

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

This is how you do it using jQuery:

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

and this is how you do it using native JavaScript:

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

0人赞添加讨论(0) 举报

1 2 下一页

Printing contents of a dynamically created iframe

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间