Print two contentWindows as one within an iFrame

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

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:

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)