प्रिंटिंग सिर्फ एक आईफ्रेम

Question

मैं एक केस रिज़ॉल्यूशन सिस्टम पर काम कर रहा हूं, और वर्तमान में उपयोगकर्ता को खुले कार्यों की सूची प्रदर्शित करने के लिए एक jquery colorbox का उपयोग कर रहा हूं। उपयोगकर्ता इस सूची को प्रिंट करने में सक्षम होना चाहते हैं, और मुझे लगता है कि आप इसे जावास्क्रिप्ट लिंक जोड़कर पृष्ठ के भीतर से ही कर सकते हैं जो iframe के भीतर window.print को ट्रिगर करता है। हालांकि, मुझे उपयोगकर्ताओं के लिए संभवतः ब्राउज़र के मेनू से प्रिंट का चयन करना भी है। उस स्थिति में, यदि कलरबॉक्स खुला है, तो मैं सिर्फ अपनी सामग्री प्रिंट करना चाहता हूं, न कि ओवरलैबल पेज पर।

क्या प्रिंट मीडिया सीएसएस फ़ाइल का उपयोग कर आईफ्रैड सामग्री को छोड़कर सब कुछ छिपाना संभव है? यदि हां, तो यह कैसे प्राप्त किया जा सकता है? ऐसा विफल होने के कारण, मुझे जावास्क्रिप्ट का सहारा लेना होगा, इसलिए जावास्क्रिप्ट में प्रभाव प्राप्त करना संभव होगा?

Answer 1

यह अगर आइफ्रेम शरीर

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

Answer 2

का एक सीधा बच्चे मामले में शुद्ध सीएसएस समाधान असफल हो जायेगी है (मेरे लिए काम नहीं किया लेकिन शायद मैं सिर्फ कुछ छूट गया हो) काम कर सकता था समाधान संयुक्त हो सकता है सीएसएस और जावास्क्रिप्ट का। सबसे पहले यह है:

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

तो ऐसे जावास्क्रिप्ट सभी सामग्री जब मुद्रण छिपाना चाहता है तो अपने फ्रेम को छोड़कर कारण होगा:

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

यह भी आइफ्रेम मान शरीर के प्रत्यक्ष बच्चे अन्यथा यह जीत लिया है ' टी काम करते हैं।

Answer 3

मुझे एक ऐसी विधि मिली है जो केवल IFrame की सामग्री को मुद्रित करने के लिए काम करती है भले ही क्लाइंट ब्राउज़र के प्रिंट मेनू आइटम का उपयोग करता हो, लेकिन मैं आपको यह नहीं बता सका कि ऐसा क्यों है। चाल प्रिंटिंग से पहले IFrame पर फोकस सेट करना है। प्रिंट स्टाइलशीट की भी आवश्यकता होती है, हालांकि जब जावास्क्रिप्ट मेनू से प्रिंट करता है तो जावास्क्रिप्ट क्या हो रहा है। काम करने के लिए आपको दोनों भागों की जरूरत है। यह पूरे दस्तावेज़ को प्रिंट करता है, भले ही यह IFrame से बड़ा हो! मैंने आईई 8, फ़ायरफ़ॉक्स 5 और 6 और सफारी 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; 
} 

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