Print two contentWindows as one within an iFrame

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

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

asked Nov 24 '18 at 9:48

jimgug

757

add a comment |

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?

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

asked Nov 24 '18 at 9:48

jimgug

757

add a comment |

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?

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

asked Nov 24 '18 at 9:48

jimgug

757

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?

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

javascript html iframe printing dojo

asked Nov 24 '18 at 9:48

jimgug

757

asked Nov 24 '18 at 9:48

jimgug

757

asked Nov 24 '18 at 9:48

jimgug

757

asked Nov 24 '18 at 9:48

jimgug

757

asked Nov 24 '18 at 9:48

jimgug

757

add a comment |

1 Answer
1

active

oldest

votes

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

edited Nov 24 '18 at 20:19

answered Nov 24 '18 at 20:14

customcommander

2,49411225

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

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53456976%2fprint-two-contentwindows-as-one-within-an-iframe%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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>

<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

edited Nov 24 '18 at 20:19

answered Nov 24 '18 at 20:14

customcommander

2,49411225

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

add a comment |

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>

<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

edited Nov 24 '18 at 20:19

answered Nov 24 '18 at 20:14

customcommander

2,49411225

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

add a comment |

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>

<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

edited Nov 24 '18 at 20:19

answered Nov 24 '18 at 20:14

customcommander

2,49411225

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>

<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

edited Nov 24 '18 at 20:19

answered Nov 24 '18 at 20:14

customcommander

2,49411225

edited Nov 24 '18 at 20:19

answered Nov 24 '18 at 20:14

customcommander

2,49411225

answered Nov 24 '18 at 20:14

customcommander

2,49411225

answered Nov 24 '18 at 20:14

customcommander

2,49411225

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

add a comment |

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

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

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk