I'm trying to use a hidden iframe to print the contents of one div
seamlessly. Currently I can create the hidden iframe, copy the
contents of the div to the iframe, and print it. I even have a method
that initially copies all the original page's styles onto the new
iframe to maintain look and feel.
So far things work, and the div (along with look and feel from styles)
are successfully copied to the iframe and printing just the hidden
iframe works.
The problem I'm facing is that the printed page doesn't have any of the
styles applied that I copied across, even though they are visible in
the iframe when viewing it.
Anyone have any idea why this might be?
Below is the code, copied and pasted, for reference.
var printObj = document.create Element('iframe ');
printObj.id = baseObj.id + 'BoxPrint';
printObj.style. width = document.body.c lientWidth;
printObj.style. height = document.body.c lientHeight;
printObj.style. display = 'none';
document.body.a ppendChild(prin tObj);
function printDiv(divObj ){
// copy all parent styles to iframe for proper "look and feel"
copyStylesAcros sWin(top,this.p rintObj.content Window);
// now copy non-styled content in
printObj.conten tWindow.documen t.body.innerHTM L = divObj.innerHTM L;
// just for debugging
printObj.style. display='';
alert(printObj. contentWindow.d ocument.body.ou terHTML);
}
function copyStylesAcros sWin(win1, win2){
if(win1 == null || win2 == null){ return; }
var linkNodeArr = win1.document.g etElementsByTag Name('link');
var headNodeObj = win2.document.g etElementsByTag Name('head').it em(0);
for (var i = 0; i < linkNodeArr.len gth; i++) {
if (linkNodeArr[i].rel != null && linkNodeArr[i].rel == 'stylesheet')
{
var styleObj = win2.document.c reateElement('l ink');
var attribArr = linkNodeArr[i].attributes;
for (var j = 0; j < attribArr.lengt h; j++){
styleObj.setAtt ribute(attribAr r[j].nodeName,
attribArr[j].nodeValue);
}
headNodeObj.app endChild(styleO bj);
}
}
}
10  3784 
jon a écrit :
I'm trying to use a hidden iframe to print the contents of one div
why won't you display only this div ?
function prtObj(idObj) {
idObj = document.getEle mentById(idObj) ;
var all = new Array();
var i =0;
while(document. body.firstChild )
{
all[i] = document.body.r emoveChild(docu ment.body.first Child);
i++;
}
document.body.a ppendChild(idOb j);
print();
document.body.r emoveChild(idOb j);
for(var i=0;i<all.lengt h;i++)
document.body.a ppendChild(all[i]);
}
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
ASM wrote on 05 dec 2006 in comp.lang.javas cript:
jon a écrit :
>I'm trying to use a hidden iframe to print the contents of one div
why won't you display only this div ?
function prtObj(idObj) {
idObj = document.getEle mentById(idObj) ;
var all = new Array();
var i =0;
while(document. body.firstChild )
{
all[i] = document.body.r emoveChild(docu ment.body.first Child);
i++;
}
document.body.a ppendChild(idOb j);
print();
document.body.r emoveChild(idOb j);
for(var i=0;i<all.lengt h;i++)
document.body.a ppendChild(all[i]);
}
don't need so much JS for that:
========= test.html ===========
<style>
@media print {
div {display:none;}
div.printDiv {display:block; }
}
</style>
<body>
<div><button onclick='print( );'>Print it</button></div>
<div>qwerty</div>
<div>qwerty</div>
<div class='printDiv '>Print only this</div>
<div>qwerty</div>
</body>
=============== =============== =
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Both the last two posts are good suggestions... but the page it is
coming from is quite complex where the div just one small section (3%
maybe), or the total page. And I will have many divs that have the
ability to print themselves. So I'd have to apply the printDiv class
dynamically somehow. Likewise, I have the ability to print he entire
page, so these classes can't interfere with that.
Still trying to get the iframe solution going...
On Dec 5, 3:06 pm, "Evertjan." <exjxw.hannivo. ..@interxnl.net wrote:
ASM wrote on 05 dec 2006 in comp.lang.javas cript:
jon a écrit :
I'm trying to use a hidden iframe to print the contents of one div
why won't you display only this div ?
function prtObj(idObj) {
idObj = document.getEle mentById(idObj) ;
var all = new Array();
var i =0;
while(document. body.firstChild )
{
all[i] = document.body.r emoveChild(docu ment.body.first Child);
i++;
}
document.body.a ppendChild(idOb j);
print();
document.body.r emoveChild(idOb j);
for(var i=0;i<all.lengt h;i++)
document.body.a ppendChild(all[i]);
}don't need so much JS for that:
========= test.html ===========
<style>
@media print {
div {display:none;}
div.printDiv {display:block; }}</style>
<body>
<div><button onclick='print( );'>Print it</button></div>
<div>qwerty</div>
<div>qwerty</div>
<div class='printDiv '>Print only this</div>
<div>qwerty</div>
</body>
=============== =============== =
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)- Hide quoted text -- Show quoted text -
Evertjan. a écrit :
ASM wrote on 05 dec 2006 in comp.lang.javas cript:
>why won't you display only this div ?
function prtObj(idObj) {
....
>}
don't need so much JS for that:
Certainly not but it is too funny to see the page emptying,
the only one div,
then the page to re-fill up :-)
========= test.html ===========
<style>
@media print {
div {display:none;}
div.printDiv {display:block; }
}
</style>
and where is the function to choose the div ?
<body>
<div><button onclick='print( );'>Print it</button></div>
<div>qwerty</div>
<div>qwerty</div>
<div class='printDiv '>Print only this</div>
<div>qwerty</div>
</body>
=============== =============== =
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
jon a écrit :
Both the last two posts are good suggestions... but the page it is
coming from is quite complex where the div just one small section (3%
maybe), or the total page.
Something like I did test before to post my idea
(file : more than 600 lines of html)
(div : a table with 2 rows)
And I will have many divs that have the
ability to print themselves.
They have a brain ? (to be capable to decide by themselves)
Still trying to get the iframe solution going...
in your iframe have a page opened similar to your main page, but with
empty body
then
function prtObj(idObj) {
var to = parent.myFrame. document.body;
var from = getElementById( idObj);
var i=0;
while(to.firstC hild) {
to.removeChild( to.firstChild);
i++;
}
to.appendChild( from);
parent.myFrame. print();
}
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
ASM wrote on 05 dec 2006 in comp.lang.javas cript:
Evertjan. a écrit :
>ASM wrote on 05 dec 2006 in comp.lang.javas cript:
>>why won't you display only this div ?
function prtObj(idObj) {
...
>>}
don't need so much JS for that:
Certainly not but it is too funny to see the page emptying,
the only one div,
then the page to re-fill up :-)
[If you want that that can also be done with a rippling
....display='no ne']
>
>========= test.html ===========
<style>
@media print {
div {display:none;}
div.printDiv {display:block; }
}
</style>
and where is the function to choose the div ?
Where?
That is easy to write in clientside JS, don't you think?
function printdiv(divId) {
var divId = document.getEle mentById(divId) ;
divId.className ='printDiv';
print();
divId.className ='';
};
><body>
<div><button onclick='printd iv('thisDiv');' >Print it</button></div>
><div>qwerty</div>
<div>qwerty</div>
<div id='thisDiv'>Pr int only this</div>
><div>qwerty</div>
</body>
============== =============== ==
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Evertjan. a écrit :
>
[If you want that that can also be done with a rippling
...display='non e']
Ho no ! too much easy :-)
Where is the pleasure ?
That is easy to write in clientside JS, don't you think?
No, I'll have to try what that give with a div which already has a class.
function printdiv(divId) {
var divId = document.getEle mentById(divId) ;
divId.className ='printDiv';
print();
divId.className ='';
};
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
ASM wrote on 05 dec 2006 in comp.lang.javas cript:
>That is easy to write in clientside JS, don't you think?
No, I'll have to try what that give with a div which already has a class.
You can temporarily swap the className:
function printdiv(divId) {
var divId = document.getEle mentById(divId) ;
var temp = ivId.className
divId.className = 'printDiv';
print();
divId.className = temp;
};
=============== =============== =
And even then why "have to"?
As a programmer you are in charge!!!
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Evertjan. a écrit :
You can temporarily swap the className:
function printdiv(divId) {
var divId = document.getEle mentById(divId) ;
var temp = ivId.className
divId.className = 'printDiv';
divId.className ='printDiv '+temp; // no ?
print();
divId.className = temp;
};
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Madame Blablavatsky |
last post by:
hello,
i am trying to build a kind of very, very simple ritch text editor for
people to use with a very simple
cms.
at the moment i am working on the basic structure.
the text is put in an iframe.
then a hidden textfield gets the value from the content of that iframe.
then the hidden textfield is sent to a php-page so it can be put in a
|
by: Kosarko |
last post by:
Hello,
I know this should be kind of easy, but I am very unfamiliar with
Javascript.
What I am looking to do is have an image (coupon) that when clicked on,
it either prompts for printing only that image, or pops up a window and
automatically after loading the image in the new window, brings up the
print dialog box. What would you...
|
by: eclectic.01 |
last post by:
I need to control the way a document is printed ...
I would like a user to print a 'ticket', however, if multiple 'tickets'
are selected, each ticket must be printed separately (separate piece of
paper per ticket) as each ticket holder MUST have their own individual
ticket for scanning (I can not assume the user would be smart enough to
cut...
|
by: zlarson |
last post by:
I have a website where a div's innerHTML is replaced with a string:
<input type="button" name="myButton" id="myButton"
onClick="printReport();"><IFRAME name="myFrame" id="myFrame"></IFRAME>
which holds a report. when the button is clicked it calls a function
to print the IFRAME:
function printReport()
{...
|
by: Drew |
last post by:
This might beyond the scope of this group because it deals with
SharePoint, but I'm not sure if I can't get it to work because of
SharePoint or because JavaScript is weird (I don't have much experience
with JavaScript).
Anyway, here is the code i'm working with. Basically, it creates
appends a hidden IFrame to the page, gets the links from...
| | |
by: prophet |
last post by:
how do I create a print button that is on my index page that prints my
target page (and only the target page)
I tried
<INPUT onclick=window.print(); type=button value="Print This Page"
style="font-size: 10px; float:right">
But it prints the index page.
Thank you.
|
by: pbd22 |
last post by:
Hi.
I am trying to poll a long-running process via a hidden IFrame.
I am noticing that the online errata gives advice for handling a
server response:
window.parent.handleServerResponse();
The problem I am having with this is that the above function
gets called ***after*** the long-running response is completed.
|
by: solanki |
last post by:
> Hi Folks,
>
> I am finding a small trouble while printing the entire contents of an
> Iframe which carries an html report which is in turn generated by
> jasper reports.s
>
> Hear is the javascript code used to print the contents of the Iframe
>
> function Print(reportframe)
>
|
by: buntyindia |
last post by:
Hi,
I have a page. There is a section 'sidebar' where bulleted text is there. Just after first bullet there is a hidden IFRAME. That go visible on clicking of that bullet text.
My problem is with Safari Browser in Mac and WindowsXP.
When we press the tab after first bullet link instead of going to next bulleted text the focus goes to the...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it. ...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...
| | |
