僅打印一個iFrame

我正在使用一個案例解析系統，並且正在使用jquery colorbox向用戶顯示打開的任務列表。用戶希望能夠打印這個列表，我想你可以從頁面內部通過添加一個JavaScript鏈接來從iframe中觸發window.print。但是，我也必須考慮可能從瀏覽器菜單中選擇打印的用戶。在這種情況下，如果彩盒是開放的，我只想打印它的內容而不是覆蓋頁面。僅打印一個iFrame

是否可以使用打印介質CSS文件隱藏除了iframed內容以外的所有內容？如果是這樣，這怎麼能實現呢？否則，我需要使用JavaScript，那麼可以在JavaScript中實現效果嗎？

來源

2010-11-04 GordonM

在我得出的結論是，iframe的是更多的麻煩比它的價值到底。我在div模式下使用colorbox，並在正在提取的頁面中添加一些邏輯，以確定它是應該呈現整個HTML頁面還是僅顯示我感興趣的數據。使用div來打印頁面樣式的問題遠沒有問題比使用iframe – GordonM 2010-11-05 12:59:41

[從父窗口打印動態創建的iframe的內容]的可能副本（http://stackoverflow.com/questions/831147/printing-contents-of-a-dynamically-created-iframe-from-parent -window） – 2017-03-10 01:15:38

-1

如果iframe是身體

<style type="text/css" media="print"> 
    body *{display:none} 
    iframe{display:block} 
</style>

來源

2010-11-04 12:18:46

從快速測試這沒有奏效，「*」優先，我會放一些我寫的快速JS。 – 2010-11-04 12:42:25

（* iframe）並調整iframe的寬度/高度以獲得最大結果;） – BGerrissen 2010-11-04 12:42:26

@ShadowWizard'！important'總是一個選項。 – TWiStErRob 2015-08-12 12:51:18

的直接孩子萬一純CSS的解決方案將失敗（沒有爲我工作，但也許我只是錯過了一些東西），這可能是工作，你可以有綜合解決方案的CSS和JavaScript。首先有這樣的：

<style type="text/css" media="print"> 
    .hideonprint { display:none; } 
</style>

那麼這樣的JavaScript會造成打印時要隱藏的所有內容，除了你的框架：

<script type="text/javascript"> 
window.onbeforeprint = function WindowPrint(evt) { 
    for (var i = 0; i < document.body.childNodes.length; i++) { 
     var curNode = document.body.childNodes[i]; 
     if (typeof curNode.className != "undefined") { 
      var curClassName = curNode.className || ""; 
      if (curClassName.indexOf("hideonprint") < 0) { 
       var newClassName = ""; 
       if (curClassName.length > 0) 
        newClassName += curClassName + " "; 
       newClassName += "hideonprint"; 
       curNode.setAttribute("original_class", curClassName); 
       curNode.className = newClassName; 
      } 
     } 
    } 
    document.getElementById("myframe").className = document.getElementById("myframe").getAttribute("original_class"); 
} 
</script>

這也承擔了iframe是身體的直接孩子，否則它贏得」不管工作。

來源

2010-11-04 12:46:36

即使客戶端使用瀏覽器的打印菜單項，我發現了一種只打印IFrame內容的方法，但我不能告訴你爲什麼。訣竅是在打印之前將焦點設置爲IFrame。打印樣式表也是必需的，儘管javascript似乎是用戶從菜單打印時發生的情況。你需要兩部分才能工作。它打印整個文檔，即使它大於IFrame！我已經在IE8，Firefox 5和6以及Safari 3.2中成功測試過它。

我使用這個腳本的處理程序onclick事件的按鈕或「打印我」鏈接：

<script type="text/javascript" language=JavaScript> 
    function CheckIsIE() 
    { 
     if (navigator.appName.toUpperCase() == 'MICROSOFT INTERNET EXPLORER') 
      { return true; } 
     else 
      { return false; } 
    } 
    function PrintThisPage() 
    { 
     if (CheckIsIE() == true) 
     { 
      document.content.focus(); 
      document.content.print(); 
     } 
     else 
     { 
      window.frames['content'].focus(); 
      window.frames['content'].print(); 
     } 
    } 
</script>

iframe的問題被命名id'd內容。我的按鈕位於名爲print_iframe的div中瀏覽器嗅探非常重要！然後我用的打印樣式表只有這樣掛在：

<link href="/styles/print.css" rel="stylesheet" type="text/css" media="print" /> 

@charset "utf-8"; 
/* CSS Document */ 
body { background:none; } 
#left { display:none; } 
#main img { display:none; } 
#banner 
{ 
display:none; 
margin-top:0px; 
padding:0px; 
} 
#main 
{ 
margin-top:0px; 
padding:0px; 
} 
#print_iframe 
{ 
display:none; 
}

來源

2011-09-29 21:00:33

// suppose that this is how your iframe look like <iframe id='print-iframe' name='print-frame-name'></iframe> 
// this is how you do it using jquery: 
$("#print-iframe").get(0).contentWindow.print(); 

// and this is how you do it using native javascript: 
document.getElementById("print-iframe").contentWindow.print();

來源

2012-03-10 16:46:07

謝謝，這爲我做了詭計。 – David 2013-04-19 04:48:15

僅打印一個iFrame

回答

相關問題