Print two contentWindows as one within an iFrame

2019-08-26 16:45发布

站内问答 / JavaScript
892 1 4

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

1条回答
神经病院院长
2楼-- · 2019-08-26 17:16

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)