Firefox將不打印iframe樣式的顯示：無

我使用的代碼來自this答案直接從打印按鈕打印單獨的頁面。用戶單擊打印按鈕並將URL發送到打印功能。打印功能將單獨頁面加載到iframe的display:none中，並打印該iframe onLoad。它適用於IE瀏覽器，但不支持Firefox。在Firefox中，它將頁面加載到div中，但從不打印或打開打印對話框。事實證明，如果它被設置爲display:none如下Firefox將不打印的iframe：Firefox將不打印iframe樣式的顯示：無

<div id="printerDiv" style="display:none"></div>

這是預期的行爲？所有其他瀏覽器打印，我想在Bugzilla發佈。我嘗試了一些CSS「技巧」，使div不顯示用戶可以看到它的位置，但它總是以某種方式顯示。我目前使用下面的CSS，使無形的iframe：

#printerDiv iframe{ 
width:1px !important; 
height:1px !important; 
border:0 !important; 
margin:0 !important; 
}

但它的利潤率依然存在，一旦產生IFRAME留下14px的差距。是否有某種方法可以使iframe不可見在所有沒有display:none屬性？更好的是，有沒有辦法做到這一點，而不是像這樣的黑客？

我甚至嘗試過使用CSS設置iframe爲display:block @print media types和display:none作爲屏幕，JS功能仍然不會打印。

來源

2011-09-01 Ben Brocka

這可能是因爲該URL位於不同的域上。 –

事實並非如此，事實上我正在傳遞一個相對鏈接。我嘗試了一個絕對的鏈接，但它得到了同樣的問題。 –

只是絕對的位置iframe離開頁面.. – GAgnew

如果你絕對定位您的iFrame關閉的頁面，它仍然會打印，而不是對用戶可見。

#printerDiv iframe{ 
    position: absolute; 
    top: -1000px; 
}

來源

2011-09-02 14:16:06 GAgnew

再次感謝。只有position/top屬性證明是必要的，因爲iframe不再可見。 –

如果你控制的iframe的內容，使其打印本身：

<script type="text/javascript"> 
window.print() 
</script>

來源

2011-09-01 19:27:24

將該文本添加到源文檔如果源打開（我試圖避免，這是一個直接打印作業），請在Firefox中啓動打印對話框。然而，它不能在'display：none' iframe中工作，所以我的按鈕仍然不起作用 –

我更新了問題，問題不是JS，而是Firefox顯式處理樣式。 –

改爲一個像素。 –

我有完全相同的問題。當display屬性設置爲none時，Firefox將爲$('#printerDiv').css('height'),$('#printerDiv')[0].style.height返回0，或者在元素上調用outerHeight()或outerWidth()。

我使用了z-index，因爲它不綁定你使用0。

所以，你可以在CSS文件中有這樣的：

#printerDiv { z-index: -10; }

然後，當你想使其可見，只需設置使用jQuery的CSS（）調用的z-index。

來源

2011-12-03 10:51:42 Navneet

我會盡快嘗試這個解決方案，因爲它可以工作，但絕對定位更可取。 –

是的，我知道。 :)我不得不在最近纔看出這一點。另外，如果您使用絕對定位，反正使用'visibility：hidden'可能比'display：none'好一點。 – Navneet

元素佔用相當多的可見性：隱藏不起作用，並且設置寬度/高度也不會隱藏它。該解決方案在Firefox和Chrome中非常適用。仍然不是在IE瀏覽器，但我想我必須爲IE做一個單獨的解決方案。 –

Firefox將不打印iframe樣式的顯示：無

回答

相關問題