Printing contents of a dynamically created iframe from parent window
Solution 1
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();
Solution 2
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>
Solution 3
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();
}
}
certainlyakey
Updated on July 09, 2022Comments
-
certainlyakey almost 2 years
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?