2010-09-29 79 views
1

爲了幫助打印,我動態生成了一個iFrame,然後用一些內容填充它。這適用於PC和Mac上的IE6,IE8,Chrome和Firefox。問題出於某種原因,它在IE7上無法正常工作。IE7將不會在動態生成的iFrame中顯示圖像

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

任何幫助或建議,將不勝感激!

回答

0

所以我真的不知道這一點。

我通過實施不同的打印方式做了一些工作。由於我無法真正利用特殊樣式表進行打印,因此我能夠進行適應性更改。基本上當用戶點擊「打印」按鈕時,javascript測試它是什麼瀏覽器。如果是IE7,則遵循特殊路徑。如果是別的,它使用iframe方法。

IE7特殊路徑基本上涉及到對現場頁面進行一堆更改,調用print,然後撤消更改。我最初嘗試過,但發現它只能在IE中使用。在打印被調用的那一刻,IE會爲頁面創建快照。然而,當你點擊確定打印時,Firefox和Chrome正在拍攝他們的快照,因此,在打印實際發生之前,所有恢復操作都發生了。

長話短說,這是我的解決方法。不太漂亮,但它完成了工作。