IE7 不会在动态生成的 iFrame 中显示图像答案

【问题标题】：IE7 won't display images in dynamically generated iFrameIE7 不会在动态生成的 iFrame 中显示图像
【发布时间】：2010-09-30 04:12:47
【问题描述】：

为了帮助打印，我动态生成了一个 iFrame，然后用一些内容填充它。这适用于 PC 和 Mac 上的 IE6、IE8、Chrome 和 Firefox。问题是由于某种原因它在 IE7 上无法正常工作。

在 IE7 中，图像不显示；相反，它们显示为损坏的图像。查看时结果相同。这很奇怪，因为就像我说的，它在 IE6 和 IE8 中运行良好。

有什么想法吗？我已经发布了一个愚蠢的副本here

这是源代码（如示例所示）：

<!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>

任何帮助或建议将不胜感激！

【问题讨论】：

标签： image iframe printing internet-explorer-7

【解决方案1】：

所以我真的想不通。

我通过实施不同的打印方式来解决问题。由于我无法真正利用特殊样式表进行打印，因此我能够进行更改以适应。基本上，当用户单击“打印”按钮时，javascript 会测试它是什么浏览器。如果是 IE7，它会遵循一条特殊的路径。如果是其他，它使用 iframe 方法。

IE7 特殊路径本质上涉及对页面进行大量更改，调用 print，然后撤消更改。我最初尝试过，但发现它只适用于 IE。 IE 会在调用 print 时拍摄页面快照以进行打印。但是，当您单击“确定”进行打印时，Firefox 和 Chrome 正在拍摄它们的快照，因此您所做的所有恢复都发生在打印实际发生之前。

长话短说，这是我的解决方法。不太漂亮，但它可以完成工作。

【讨论】：