Chỉ in iFrame

Question

Tôi đang làm việc trên hệ thống phân giải chữ hoa chữ thường và hiện đang sử dụng hộp màu jquery để hiển thị danh sách nhiệm vụ đang mở cho người dùng. Người dùng muốn có thể in danh sách này và tôi đoán bạn có thể làm điều đó từ bên trong trang bằng cách thêm liên kết JavaScript kích hoạt window.print từ bên trong khung nội tuyến. Tuy nhiên, tôi cũng phải tính đến người dùng có thể chọn in từ trình đơn của trình duyệt. Trong trường hợp đó, nếu hộp màu mở, tôi chỉ muốn in nội dung của nó chứ không phải trang nằm ở phía trên.

Có thể ẩn mọi thứ ngoại trừ nội dung iframe bằng tệp CSS phương tiện in không? Nếu vậy, làm thế nào điều này có thể đạt được? Nếu không, tôi sẽ cần phải sử dụng JavaScript, vì vậy sẽ đạt được hiệu quả trong JavaScript?

Answer 1

Điều này có thể hoạt động nếu iframe là một đứa trẻ trực tiếp của cơ thể

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

Answer 2

Trong trường hợp các giải pháp CSS tinh khiết sẽ thất bại (không làm việc cho tôi, nhưng có lẽ tôi chỉ bỏ lỡ một cái gì đó), bạn có thể đã kết hợp giải pháp CSS và JavaScript. Đầu tiên có điều này:

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

Sau đó, ví dụ JavaScript sẽ gây ra tất cả nội dung được ẩn khi in, ngoại trừ khung hình của bạn:

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

này cũng giả định iframe là con trực tiếp của cơ thể nếu không nó thắng' t làm việc.

Answer 3

Tôi đã tìm thấy phương thức hoạt động để in nội dung của IFrame ngay cả khi khách hàng sử dụng mục trình đơn in của trình duyệt, nhưng tôi không thể cho bạn biết lý do tại sao. Bí quyết là đặt trọng tâm vào IFrame trước khi in. Bản định kiểu in cũng cần thiết, mặc dù javascript có vẻ là những gì đang xảy ra khi người dùng in từ trình đơn. Bạn cần cả hai phần để nó hoạt động. Nó in toàn bộ tài liệu, ngay cả khi nó lớn hơn IFrame! Tôi đã thử nghiệm thành công nó trong IE8, Firefox 5 và 6 và Safari 3.2.

tôi sử dụng kịch bản này như một handler cho sự kiện onclick cho một nút hoặc "in tôi" link:

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

Các IFrame trong câu hỏi được đặt tên và id'd nội dung. Nút của tôi nằm trong div được gọi là print_iframe Trình duyệt đánh hơi là điều cần thiết! Sau đó, tôi sử dụng một chỉ in stylesheet liên kết trong như thế này:

<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; 
} 

Answer 4

// 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();