Welcome to WebmasterWorld Guest from 54.225.33.25

Forum Moderators: open

Message Too Old, No Replies

JavaScript Print Function: Printing an External Page?

     
1:30 pm on Dec 11, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 22, 2005
posts:78
votes: 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.

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

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 29, 2007
posts:1147
votes: 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();
4:37 pm on Dec 11, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:July 5, 2005
posts:352
votes: 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.
3:21 am on Dec 12, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 22, 2005
posts:78
votes: 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.

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

Junior Member

10+ Year Member

joined:Aug 22, 2005
posts:78
votes: 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.

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

Preferred Member

10+ Year Member

joined:July 5, 2005
posts:352
votes: 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.

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

Preferred Member

10+ Year Member

joined:July 5, 2005
posts:352
votes: 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>

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

Junior Member

10+ Year Member

joined:Aug 22, 2005
posts:78
votes: 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.

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

Full Member

5+ Year Member

joined:Sept 5, 2007
posts:264
votes: 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.)

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

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 29, 2007
posts:1147
votes: 0


Ooo me too!

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

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

Preferred Member

10+ Year Member

joined:July 5, 2005
posts:352
votes: 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).

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

Junior Member

10+ Year Member

joined:Aug 22, 2005
posts:78
votes: 0


Hi poppyrich,

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

Thanks a lot!

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

Full Member

5+ Year Member

joined:Sept 5, 2007
posts:264
votes: 0


I got around to testing.

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