0

I have a webpage with multiple iFrames e.g. 6 and I'd like to be able to print 2 of those frames as one call rather than grabbing the contentWindow of each frame and then calling:

parent.iFrame1.focus();
parent.iFrame1.print();
parent.iFrame2.focus();
parent.iFrame2.print();

as it prints the contents in two separate print preview windows in the browser.

I tried the following but none really give me what I'm looking for or work for me (i.e. the content is truncated)

Is it possible to do or am I beating a dead horse?

I've also tried grabbing the html from the iframes and writing it to a new document but feel that's a bit heavy handed. Also there are multiple css and script files etc that would need to be merged to present one cohesive page.

Any answers would be greatly appreciated!

Potential solutions I've tried that haven't worked so far:

Wait for html to write to window before calling window.print()

Print preview from multiple iframes?

https://graciesdad.wordpress.com/2007/04/19/all-in-one-printing-from-multiple-iframes/

Javascript Print iframe contents only

jimgug
  • 165
  • 3
  • 10

1 Answers1

1

I would use another iframe to do that job. That iframe must be in the same domain though.

In your main page (e.g. mydomain/index.html)

<html>
  <head>
    <style>
      .print {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
      <script>
        function printIframes(urls) {
          var iframe = document.createElement('iframe');
          iframe.className = "print";
          iframe.src = `print.html?urls=${encodeURIComponent(urls.join(','))}`;
          iframe.onload = function () {
            this.contentWindow.focus();
            this.contentWindow.print();
          };
          document.body.appendChild(iframe);
        }
      </script>
    </body>
</html>

The printIframes() function takes an array of urls of external pages to print. It creates an "invisible" iframe (see .iframe css class) that loads print.html with these urls in the query string:

<iframe src="print.html?urls=http://example.com,http://example.com"></iframe>

If you were to access that iframe directly this is what you'd see:

enter image description here

In print.html e.g. mydomain/print.html

This page decodes the urls query string and creates one iframe per url to load.

<html>
    <body>
        <script>
          var urls = document.location.search.split('=')[1];
          urls = decodeURIComponent(urls);
          urls = urls.split(',');
          urls.forEach(url => {
            var iframe = document.createElement('iframe');
            iframe.src = url;
            document.body.appendChild(iframe)
          });
        </script>
    </body>
</html>

Example

In this screenshot, I load the main page (index.html) and in the developer console, I call the printIframes() function: (You won't actually see them)

enter image description here

Which is then immediately followed by a request to print the content of that iframe.

enter image description here

customcommander
  • 17,580
  • 5
  • 58
  • 84
  • Looks great actually! Is it also possible to size the iframes to display the content within them to size? – jimgug Nov 25 '18 at 18:41
  • Not sure I follow, you would like each iframe to automatically resize based on their content? – customcommander Nov 25 '18 at 19:22
  • So for each frame they can have varying lengths of content. E.g one page and another a quarter of a page. My question is if there is a way when the page loads to size the frame to display all the content needed. – jimgug Nov 25 '18 at 19:49
  • That may be doable. If page A contains page B and both are in the same domain, it may be possible for page B to communicate its dimensions up to page A which would then resize the iframe pointing to page B accordingly. – customcommander Nov 25 '18 at 20:50