Menu
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?
684
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();
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
