So überschreiben Standard-Browser drucken und drucken ein Iframe standardmäßig

Ich habe eine Dokumentation Typ Seite mit einem iframe innerhalb. Ich versuche, Standard-Browser-Print (Strg + P) zu überschreiben, um nur Inhalte eines Iframes zu drucken.So überschreiben Standard-Browser drucken und drucken ein Iframe standardmäßig

Ich weiß, wie ein iframe Inhalt mit Hilfe von Javascript drucken:

window.frames['webcontent'].focus(); 
window.frames['webcontent'].print();

Ich weiß, wie lief Javascript tun vor dem Drucken z.B. wie hier beschrieben: Check for when a user has selected to print using javascript

Irgendwelche Ratschläge?

Dank

Quelle

2014-07-25 Burjua

es nicht möglich ist (mit Javascript). Es gibt eine experimentelle Unterstützung für benutzerinitiierte Druckereignisse in modernen Browsern, aber diese are not cancelable ("einfache Ereignisse"), so dass die gesamte Seite immer noch gedruckt wird, selbst wenn Sie benutzerdefinierten Code einwerfen, um das Bild von Interesse zu drucken.

Angesichts dieser Einschränkung ist Ihre beste Wette wahrscheinlich, Benutzern eine große Schaltfläche anzubieten, die Ihre benutzerdefinierte Rahmen-Druckfunktion auslöst (siehe unten printContentFrameOnly, feuern Sie ohne Argumente) und hoffe, dass sie die Schaltfläche anstelle von Strg-P verwenden werden .

Wenn es würde möglich sein, wäre dies der Weg, es zu tun (basierend auf this answer):

// listener is a function, optionally accepting an event and 
// a function that prints the entire page 
addPrintEventListener = function (listener) { 

    // IE 5.5+ support and HTML5 standard 
    if ("onbeforeprint" in window) { 
     window.addEventListener('beforeprint', listener); 
    } 

    // Chrome 9+, Firefox 6+, IE 10+, Opera 12.1+, Safari 5.1+ 
    else if (window.matchMedia) { 
     var mqList = window.matchMedia("print"); 

     mqList.addListener(function (mql) { 
      if (mql.matches) listener(); // no standard event anyway 
     }); 
    } 

    // Your fallback method, only working for JS initiated printing 
    // (but the easiest case because there is no need to cancel) 
    else {  
     (function (oldPrint) { 
      window.print = function() { 
       listener(undefined, oldPrint); 
      } 
     })(window.print); 
    } 
} 

printContentFrameOnly = function (event) { 
    if (event) event.preventDefault(); // not going to work 
    window.frames['webcontent'].focus(); 
    window.frames['webcontent'].print(); 
} 

addPrintEventListener(printContentFrameOnly);

Quelle

2014-07-28 13:18:14 Julian

Ich war auf der Suche nach einer Javascript-Lösung, da CSS für mich nicht funktioniert. Dies als eine Antwort markieren. – Burjua

Vielen Dank. Für das, was es wert ist, stimme ich völlig zu, dass xDNP den Bounty Award verdiente und ich auch ihre Antwort auffrischte. – Julian

Sie können eine CSS-Datei für den Druck definieren:

@media print { 
    * { display: none; } 
    iframe { display: block; } 
    }

EDIT

Mybad nur knapp sein Ziel getestet.

* { display: none; } is somehow overwriting all

Aber das funktioniert wie ein Zauber

http://jsfiddle.net/c4e3H/ 

    @media print { 
    h1, p{ display: none; } 
    }

Quelle

2014-07-25 11:56:46 jungerislaender

Nein, es funktioniert nicht, druckt nur eine leere Seite. Chrome druckt iframe-Inhalte auch ohne diese Regel nicht, daher glaube ich nicht, dass ich nur mit css arbeiten kann. – Burjua

Ihre erste funktioniert nicht, weil '* {display: none; } verbirgt übergeordnete Elemente Ihres 'iframe' (' html'/'body'). – cchamberlain

Bruder, kann dies leicht durch CSS erreicht werden: See thisJSfiddle: Tested

<style> 
@media print{ 
    body * {display:none;} 
    .toPrint{display:block; border:0; width:100%; min-height:500px} 
} 
</style>

Lassen Sie eine HTML-Datei:

<body> 
    <h3>I do not want this title Printed</h3> 
    <p> This paragraph should not be printed</p> 
    <iframe class="toPrint" src="http://akitech.org"></iframe> 
    <button onclick="window.print()">Print</button> 
</body>

Quelle

2014-07-28 16:59:00 tika

Mit 'body * {}' werden alle Körperelemente in CSS ausgewählt – tika

Das ist der Punkt. Es blendet alle Körperelemente aus, wenn der Druckdialog die Seite rendert, so dass nur der Iframe angezeigt wird (aufgrund der zweiten CSS-Regel). Es wird nicht auf den Körper des Iframes angewendet, da das CSS des Elternfensters des Rahmens keine Auswirkung darauf hat. – Slight

Dies druckt einen iframe mit scrollbars croping contains in Chrome und IE für mich. – cchamberlain

Der einzige Weg, den ich mir vorstellen kann, ist, den gesamten Inhalt des Dokuments außer dem iFrame zu verbergen und es dem gesamten Dokument anzupassen.

<!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<style type="text/css"> 
body.hide *, body #backdrop 
{ 
    display: none !important; 
} 
body.hide #my_print_iframe, body.hide #backdrop 
{ 
    background: white; 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    border: 0; 
    width: 100%; 
    height: 100%; 
    display: block !important; 
} 
@media print { 
    body.hide #backdrop 
    { 
     display: none !important; 
    } 
} 
</style> 
    <script> 
    $(document).on('keydown', function(e){ 
     if (e.keyCode == 80 && (e.metaKey || e.ctrlKey)) { 
      $("body").addClass('hide'); 
      setTimeout(function(){ 
       $("body").removeClass('hide'); 
      },1000) 
     } 
    }) 
    </script> 
</head> 
<body> 
    <div> 
    this is some visible text 
    </div> 
    <iframe id="my_print_iframe" src="//example.com"></iframe> 
</body> 
</html>

Ich verwendete Timeout (böse, ich weiß), weil zumindest Chrom 38 nicht das keyup Ereignis nach ctrl senden + p

Quelle

2014-08-03 01:30:38

Hallo könnte diesen Code wird Ihnen helfen ..

function PrintElem(elem) 
{ 
    Popup($(elem).html()); 
} 

function Popup(data) 
{ 
    var mywindow = window.open('', 'printMe', 'height=400,width=600'); 
    mywindow.document.write('<html><head><title>Print Me</title>'); 
    mywindow.document.write('</head><body >'); 
    mywindow.document.write(data); 
    mywindow.document.write('</body></html>'); 

    mywindow.print(); 
    mywindow.close(); 

    return true; 
}

und rufen Sie die Funktion PrintElem ('iframe') auf Ihrer Seite auf.

Quelle

2014-08-04 07:11:21 user2706194

Die Idee besteht darin, den Iframe-Inhalt irgendwo auf der Seite zu setzen und NUR diesen Inhalt zu drucken, indem der ursprüngliche Inhalt ausgeblendet wird.

Dies kann erfolgen, indem der Iframe-Inhalt abgerufen wird, wenn das Ctrl + P-Ereignis ausgelöst wird (über JavaScript), und nur der Inhalt gedruckt wird (über den CSS @ media-Typ).

HTML-Code:

<div id="dummy_content"><!-- Here goes the iframe content, which will be printed --></div> 
    <div id="content_wrapper"> 
     <div id="current_content">Current Content that the user see<div> 
     <iframe id="myIframe" src="iframe.html"></iframe> 
    </div>

CSS-Code:

@media screen { 
    #dummy_content { 
     display:none; /* hide dummy content when not printing */ 
    } 
}    
@media print { 
    #dummy_content { 
     display:block; /* show dummy content when printing */ 
    } 
    #content_wrapper { 
     display:none; /* hide original content when printing */ 
    } 
}

JavaScript-Code:

 var dummyContent = document.getElementById("dummy_content"); 
     function beforePrint() { 
       var iFrame = document.getElementById("myIframe"); 
       dummyContent.innerHTML = iFrame.contentWindow.document.body.innerHTML; // populate the dummy content (printable) with the iframe content 
     } 

     document.onkeydown = function(e) { 
      if (e.ctrlKey && e.keyCode == 80) { 
       beforePrint(); 
      } 
     }

Quelle

2014-08-04 11:51:06

So überschreiben Standard-Browser drucken und drucken ein Iframe standardmäßig

Antwort

Verwandte Themen