Home/ Questions/Q 3212386
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T14:49:59+00:00

In order to aid with printing, I’m dynamically generating an iFrame and then populating

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    So I couldn’t really figure this out.

    I did a work around by implementing a different way of printing. Since I couldn’t really take advantage of a special style sheet for printing, I WAS able to make a change to accomodate. Basically when the user clicks the “print” button, the javascript tests what browser it is. If it’s IE7, it follows a special path. If it’s anything else, it uses the iframe method.

    The IE7 special path essentially involves making a bunch of changes to the page live, calling print, then undoing the changes. I tried this initially but found it only worked in IE. IE would take a snapshot of the page for printing at the moment print was called. However Firefox and Chrome were taking their snapshot when you click OK to print, so all of the reverting you did took place before the print actually happens.

    Long story short, this was my workaround. Not too pretty, but it gets the job done.

    • 0