How to override standard browser print and print an iframe by default

javascript jquery html iframe printing

26,305

Solution 1

It's not possible (using Javascript). There is some experimental support for user-initiated print events in modern browsers, but those are not cancelable ("simple events") so the entire page will still print even if you interject custom code to print the frame of interest.

Given this limitation, your best bet is probably to offer users a large button that fires your custom frame printing function (see printContentFrameOnly below, fire it without arguments) and hope that they'll use the button instead of ctrl-p.

If it would be possible, this would be the way to do it (based on 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);

Solution 2

It can be easily achieved through CSS: See thisJSfiddle: Tested

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

Let an HTML File be:

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

Solution 3

The idea is to set the iframe content somewhere on the page, and print ONLY that content, by hiding the original content.

This can be done by getting the iframe content when Ctrl+P event is being initiated (via JavaScript), and print only its content (via CSS @media type).

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

Solution 4

You can define a css file for printing:

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

EDIT

Mybad didnt tested it.

* { display: none; } is somehow overwriting all

But this is working like a charm

http://jsfiddle.net/c4e3H/

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

View more solutions

26,305

Author by

Burjua

Updated on July 24, 2022

Comments

Burjua almost 2 years
I have a documentation type page with an iframe inside. I'm trying to override standard browser print (Ctrl + p) to print contents of an iframe only.

I know how to print an iframe content using javascript:
```
window.frames['webcontent'].focus();
window.frames['webcontent'].print();
```
I know how to do run javascript before printing e.g. as described here: Check for when a user has selected to print using javascript

Any advise?

Thanks
Burjua almost 10 years

Nope, it doesn't work, just prints an empty page. Chrome doesn't print iframe content even without this rule, so I don't think I can do it with css only.
tika almost 10 years

Using body * {} selects all body elements in CSS
Burjua almost 10 years

I was looking for a javascript solution, as css didn't work for me. Marking this as an answer.
Julian almost 10 years

Thank you. For what it's worth, I completely agree xDNP deserved the bounty award, and I also upvoted their answer.
Slight almost 9 years

That's the point. It hides all body elements when the print dialog is rendering the page so as to only display the iframe (due to the second css rule). It won't apply to the iframe's body because the frame's parent window's css has no bearing over it.
cchamberlain over 7 years

Your first one doesn't work because * { display: none; } hides parent elements of your iframe (html / body).
cchamberlain over 7 years

This prints an iframe with scrollbars cropping content in both chrome and IE for me.
igorsantos07 about 3 years

that still doesn't cover printing from menus - the main way to print from a mobile device, for instance