1

I'm working on a printing function for a web mail client, currently as we need to show some additional mail infos, so display an email by embedding a iframe, iframe height is dynamic based on inner content height, when I click 'Print' menu of browser then the print preview dialog pops up, find that can not print entire iframe content. Anybody know why? Thanks!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <style>
            iframe{
                width: 100%;
                border: 1px solid #ECECEC;
            }
        </style>
        <script>
            function loaded(evt) {
                const frame = evt.target;
                frame.height = frame.contentWindow.document.body.scrollHeight;
            };
            function reloadFrame(frame) {
                frame.height = 'auto';
                loaded({target: frame});
            }
            window.onresize = function() {
                reloadFrame(frame1);
                reloadFrame(frame2);
            }

        </script>
    </head>
    <body>
        <div class="container">
            <h2>additional info</h2>
            <iframe id="frame1" src="child.html" width="100%" onload="loaded(event);" scrolling="no" frameborder="0"></iframe>
            <h2>additional info</h2>
            <iframe id="frame2" src="child2.html" width="100%" onload="loaded(event);" scrolling="no" frameborder="0"></iframe>
        </div>
    </body>
</html>

Here are some screenshots:

Html Page

Print Preview

hwangzhiming
  • 21
  • 6
  • Does this link help: https://stackoverflow.com/questions/9616426/javascript-print-iframe-contents-only – stevenlacerda Sep 01 '17 at 19:41
  • Maybe print preview changes the width of the page but does not fire the resize event. So the text wraps differently but iframe heights are not adjusted. [This might be helpful](https://stackoverflow.com/questions/32345745/how-to-trigger-javascript-function-when-select-print-preview). – showdev Sep 01 '17 at 19:53
  • @showdev yes you are right, now I fixed this by inject a preset css file to the iframe and make the width smaller – hwangzhiming Sep 12 '17 at 05:32
  • But printing iframes in IE prints the first page, if you have more than on iframe, sucks – hwangzhiming Sep 12 '17 at 07:02

0 Answers0