2012-06-07 53 views
5

[簡化這個問題的版本:]麻煩印刷的iFrame

爲什麼有時iFrame的拒絕打印?例如,打在這兩個網頁print preview

  1. http://fiddle.jshell.net/gJDv4/1/show/
  2. http://fiddle.jshell.net/gJDv4/2/show/

在打印預覽,I幀是在第一個例子中可見,但隱藏在第二位。僅在firstsecond之間的代碼差異iFrames是CSS屬性(margin: 20px;)已被添加到第二個示例中的iFrame。


[龍(原)版本:]

我構建裝配引用自己的樣式表和javascript文件一堆獨立的HTML文件的預覽/打印頁。

的想法是,所有文件都顯示在iFrame中進行預覽,然後打印時,每個iFrame的(這可能會跨越多個頁面)打印出來就好像它是它自己的文件。

但是,當我打印(或打印預覽)時,iFrame不顯示內容,或只打印第一頁,截斷iFrame的其餘頁面。

印刷I幀(和打印預覽)就好了之前我讓他們多頁:

這種行爲的原因是什麼?

+0

嘿嘿,我懷疑是否有解決方案,但我會+1誰管理得到這個正常工作:P和+1花費代表它得到答案,同時擁有這個小自己。 :) – sg3s

+0

如果沒有真正的答案,那麼你當然應該得到認可的賞金。 ;) – brentonstrine

回答

3

您可以撥打他們的窗戶print()功能打印在個人I幀的文件....

因此,像這樣打印文件2:

$('#iframeTwo')[0].contentWindow.print() 

而且這裏的jsfiddle哪裏我添加了觸發單獨打印按鈕...

http://jsfiddle.net/sg3s/GJKkm/17/

至於爲什麼瀏覽器做打印父文檔時,不會打印iframe內的內容。可能必須做的事情是,這些文件實際上並不是它們顯示在其中的文件的一部分......把它想象成一個單獨的窗口(你可以用js中的window.open()生成一個窗口),但是然後巧妙地將視口限制在iframe中指定的任何一個魔術的主文檔中。

+0

單獨打印iframe的問題在於,它打開了某人在其中兩個正在打印的HTML文件之間結束打印作業的可能性,因爲(我假設)他們將作爲單獨的打印作業進入打印隊列。 關於爲什麼內容不出現的解釋是我猜測的,但仍然存在當iFrames不會溢出到單獨頁面時出現的問題! – brentonstrine

+0

如果你想保留你的打印作業,你可能會更好地將兩個文檔放在一起,採取一些額外的照顧,以分類風格使用類...是的,這種行爲是奇怪的,但如果你想想它,這是驚人的他們顯示在所有...它可能會嘗試將其呈現爲正常的HTML,但因爲有限制框架內容錯誤。順便說一下,我無法在Chrome中重現這一點,因此如果您想通過瀏覽器使用此功能,則可以立即停止:p – sg3s

+0

將兩個文檔與不同樣式表一起使用。這可能有點工作密集,但可能會工作;拿兩個文件,把html放在單獨的「根」節點上,標識不同的文件。獲取文檔的樣式表,並將它們組裝到嵌套結構中的css預編譯器中(如[LESS](http://lesscss.org/#-nested-rules)),讓預編譯器創建樣式表,使用嵌套集合中的節點將該樣式表中的樣式僅應用於相關文檔。包括生成的樣式表。贏得。 – sg3s