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
javascript html iframe printing dojo
asked Nov 24 '18 at 9:48
jimgugjimgug
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?
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
javascript html iframe printing dojo
asked Nov 24 '18 at 9:48
jimgugjimgug
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?
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
javascript html iframe printing dojo
asked Nov 24 '18 at 9:48
jimgugjimgug
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?
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
javascript html iframe printing dojo
javascript html iframe printing dojo
asked Nov 24 '18 at 9:48
jimgugjimgug
757
asked Nov 24 '18 at 9:48
jimgugjimgug
757
asked Nov 24 '18 at 9:48
jimgugjimgug
757
asked Nov 24 '18 at 9:48
jimgugjimgug
757
asked Nov 24 '18 at 9:48
jimgugjimgug
757
757
add a comment |
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:
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)
Which is then immediately followed by a request to print the content of that iframe.
answered Nov 24 '18 at 20:14
customcommandercustomcommander
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
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:
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)
Which is then immediately followed by a request to print the content of that iframe.
answered Nov 24 '18 at 20:14
customcommandercustomcommander
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>
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)
Which is then immediately followed by a request to print the content of that iframe.
answered Nov 24 '18 at 20:14
customcommandercustomcommander
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>
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)
Which is then immediately followed by a request to print the content of that iframe.
answered Nov 24 '18 at 20:14
customcommandercustomcommander
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>
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)
Which is then immediately followed by a request to print the content of that iframe.
answered Nov 24 '18 at 20:14
customcommandercustomcommander
2,49411225
edited Nov 24 '18 at 20:19
answered Nov 24 '18 at 20:14
customcommandercustomcommander
2,49411225
answered Nov 24 '18 at 20:14
customcommandercustomcommander
2,49411225
answered Nov 24 '18 at 20:14
customcommandercustomcommander
2,49411225
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
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
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
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
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 |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
