In order to aid with printing, I'm dynamically generating an iFrame and then populating it with some content. This works on IE6, IE8, Chrome and Firefox on both PC and Mac. The problem is for some reason it's not working right on IE7.
In IE7, the images do not display; instead they show as broken images. Same result when viewing. It's strange because like I said, it works fine in IE6 and IE8.
Any ideas? I've posted a dumbed down copy here
Here's the source code (as seen in the example):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>iframe print test</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function printIFrameFunc(id)
{
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
iframe.focus();
ifWin.print();
return false;
}
function printfra() {
$("iframe#printIFrame").remove();
// Create an iframe which will be populated with the data to be printed...
$('body').append('<iframe id="printIFrame"></iframe>');
// !!! This next line commented so the iframe will be visible on the screen
//$("iframe#printIFrame").attr('style','position:absolute;left:-500px;top:-500px;');
// Don't do anything on the iframe until it's ready to go
if ($.browser.webkit)
$("iframe#printIFrame").ready(iframeloadedprint);
else
$("iframe#printIFrame").load(iframeloadedprint);
function iframeloadedprint() {
var printBody = $("iframe#printIFrame").contents().find('body');
printBody.html( $("#mainContainer").html() );
printIFrameFunc('printIFrame');
}
return false;
}
</script>
</head>
<body>
<div id="mainContainer">
<img src="dash.png" alt="test image" />
<a href="#" onclick="printfra();">Click here to print</a>
</div>
</body>
Any help or suggestions would be greatly appreciated!