homepage Welcome to WebmasterWorld Guest from 54.196.201.253
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
JavaScript Print Function: Printing an External Page?
webgaya




msg:3524976
 1:30 pm on Dec 11, 2007 (gmt 0)
I have two pages in the same folder: index.html
and print.html. print.html contains a button which
calls a JavaScript function. When calling this function,
I want to print index.html. Can I achieve this? I tried
it and couldn't get it done. The code I tried is as below.

print.html
=========================
<html>
<head>
<script type="text/javascript">
function printExternal() {
printWindow = new Object();
printWindow.window.location = "index.html";
printWindow.window.print();
}
</script>
</head>
<body>
<form>
<input type="button" name="print" value="Print" onclick="printExternal();" />
</form>
</body>
</html>

index.html
=========================
<html>
<body>
<h1>Print Test!</h1>
</body>
</html>

Thanks.

 

Dabrowski




msg:3525151
 4:33 pm on Dec 11, 2007 (gmt 0)

printWindow = new Object();
printWindow.window.location = "index.html";
printWindow.window.print();

You've created a new object. A new object contains nothing. It's kinda like a blank canvas for you to use later.

You somehow seem to have coded it as if it's miraculously going to turn into another page?

I personally would approach this from a popup point of view.....

printWindow = window.open( myWindow, "index.html");
printWindow.print();
printWindow.close();

Trace




msg:3525154
 4:37 pm on Dec 11, 2007 (gmt 0)

Easiest way I can think of is to simply load index.html into a hidden frame and then have the button on your print.html print the frame content.

webgaya




msg:3525624
 3:21 am on Dec 12, 2007 (gmt 0)

Hi, Dabrowski,

I tried your code, but it doesn't work for me,
Can you integrate it to the code I posted and
show me how to do it?

Thanks.

webgaya




msg:3525636
 3:57 am on Dec 12, 2007 (gmt 0)

Hi Trace,

Thanks for the advice. Can you just show me how to do it?
I mean how can I call the content of a frame to print using JavaScript?

Thanks.

Trace




msg:3527801
 3:54 pm on Dec 14, 2007 (gmt 0)

This is how I see it;

Your print.html has a hidden frame that points to index.html

You need to add a little function to index.html that will print that page;

function CallPrint(){
self.focus()
self.print()
}

So on print.html you simply call the function on index.html, something like; document.getElementById('yourFrame').CallPrint();

I haven't tried it but it should work.

Trace




msg:3527812
 4:00 pm on Dec 14, 2007 (gmt 0)

Here, I put together a working example for you.

print.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title> New Document </title>
</head>
<body>

<iframe name="toPrint" src="index.html"></iframe>

<form>
<input type="button" onclick="document.toPrint.printThePage();" value="Print index.html">
</form>

</body>
</html>

index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title> New Document </title>
<script type="text/javascript">
function printThePage(){
self.focus()
self.print()
}
</script>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tincidunt aliquam metus. Quisque rutrum pretium odio. Aliquam erat volutpat.</p>

</body>
</html>


webgaya




msg:3529275
 6:29 am on Dec 17, 2007 (gmt 0)

Hi Trace,

Thanks for your code,

I tested it in Firefox both under Windows and Linux.
But it doesn't work in either case.

poppyrich




msg:3529300
 7:34 am on Dec 17, 2007 (gmt 0)

I have not tried this, but considering you're problem, now is the time.

I have seen this work on a demo page posted somewhere but haven't tested it myself.
It might solve your problem completely and it's a cool thing to know, absolutely.

If you put this link tag in the head of the page, when the user goes to print it will print out the alternate page.

<link rel=alternate media=print href="print.html">

Let us know if this works out... please.
(Save me the trouble because now my curiosity is piqued.)

Dabrowski




msg:3529442
 1:18 pm on Dec 17, 2007 (gmt 0)

Ooo me too!

webgaya, sorry I never posted an example, I've just been too busy. Normally I would have.

Trace




msg:3529685
 7:13 pm on Dec 17, 2007 (gmt 0)

I tested it in Firefox both under Windows and Linux.

Well, there's your problem!

Seriously though, sorry it doesn't work in FX. I don't have it installed so I can't debug it for you but I'm sure it's something very minor.

Unless you have several print buttons for printing different sections of the page, poppyrich's suggestion is probably better anyways (assuming it works).

webgaya




msg:3529993
 4:54 am on Dec 18, 2007 (gmt 0)

Hi poppyrich,

I will surely try it out and post the result here.

Thanks a lot!

poppyrich




msg:3531281
 5:05 pm on Dec 19, 2007 (gmt 0)

I got around to testing.

It worked in IE.
Bombed in FF2, FF Beta 3, Opera latestver

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved