reptile7's JavaScript blog: Got Live and In Print If You Want It

Thursday, September 09, 2010

Got Live and In Print If You Want It
Blog Entry #190

Today we will briefly discuss the "Print a Web Page Using JavaScript" and "So, You Want A Live Script, Huh?" tutorials in HTML Goodies' Beyond HTML : JavaScript sector.

Print it

Back when we were discussing the document.execCommand( ) method not so long ago, we noted in the "Syntax" section of Blog Entry #179 that a few execCommand( ) commands have an associated user interface and that one of those commands is a print command. Microsoft provides at this page a summary of the print execCommand( ) command, which [o]pens the print dialog box so the user can print the current page. The print command does not appear in Mozilla's list of supported execCommand( ) commands nor is it among the execCommand( ) commands that are slated to be standardized in HTML5 (the W3C may or may not standardize execCommand( ) and its commands in the future).

In querying support for the print command with the document.queryCommandSupported( ) method, I find on my iMac that document.queryCommandSupported("print") returns true when using Safari or Chrome and false when using Opera; as noted in the "Query it" section of Blog Entry #180, document.queryCommandSupported( ) is not supported/implemented by Firefox and Camino. In the event, running document.execCommand("print") (the print command doesn't take a value, required or optional) with Safari and Chrome does indeed pop up my print dialog box

but with Opera throws a NOT_SUPPORTED_ERR error. Somewhat strangely, nothing happens at all when I try to run document.execCommand("print", false, null) with Firefox and Camino: although the print dialog doesn't pop up (I wasn't expecting it to), no errors are thrown, either.

Fortunately, there is a simpler, cross-browser way to open a print dialog box - a way I heretofore had been unaware of, as we've never used it previously, and that was brought to my attention by HTML Goodies' "Print a Web Page Using JavaScript" tutorial. In JavaScript 1.2 (i.e., for Navigator 4.0-4.05), Netscape added to the client-side window object a print( ) method for printing the contents of the window. The window.print( ) method was subsequently picked up by Microsoft; according to irt.org, MSIE support for window.print( ) began with MSIE 5 (the MSDN Library doesn't specify any 'this feature requires Microsoft Internet Explorer x.x or later' history at its window.print( ) page). That would be MSIE 5 for Windows, guys - I find that window.print( ) throws an Object doesn't support this property or method runtime error with MSIE 5.x for the Mac. Moreover, the W3C has brought window.print( ) into HTML5.

window.print( ) is a pretty basic method - it takes no parameters and doesn't have a return value (var printReturn = window.print( ); returns undefined) - and "Print a Web Page Using JavaScript" is accordingly a pretty basic tutorial. Joe provides code for triggering window.print( ) with a link or a button. His link-trigger code

<a href="javascript:window.print( );"> ...text or an image... </a>

features a JavaScript URL whereas his button-trigger code

<form><input type="button" onclick="window.print( );" /></form>

employs an input element-type button wrapped in a form element. I recommend the latter approach - I don't like the use of links as user interface elements - but with a standalone button element:

<button type="button" onclick="window.print( );"> ...text, an image, whatever... </button>

That said, Joe's Click to Print This Page link demo works with all of the non-MSIE OS X GUI browsers on my computer.

The tutorial also sports a "Some Printing Suggestions" section whose useful recommendations include:
(1) Use window.print( ) with a print-optimized page, more specifically, a page whose content width is no more than 500px and with no more color/graphics than is necessary.
(2) Don't trigger window.print( ) via an event that might catch the user by surprise (Joe doesn't quite put it this way, but that's what he means), e.g., a load or mouseover event.

Before moving on...
As pointed out in the tutorial comment thread, it is possible to print only part of a page by combining window.print( ) with some CSS: simply apply to the page a media="print" style element that zeroes out unwanted content via a display:none; declaration.

<style type="text/css" media="print">

.noprint { display: none; }

/* Equivalently, you can subtract the media="print" attribute and use

@media print { .noprint { display: none; } }

for the style rule. */

</style>

...

<p class="noprint">Don't print me, Bro...</p>

Is it live, or is it JavaScript?

As recounted in Wikipedia's "JavaScript" entry and references cited thereby, JavaScript was in mid-1995 originally named "Mocha"; over the next several months, "Mocha" was rechristened "LiveScript" and then "JavaScript". HTML Goodies' "So, You Want A Live Script, Huh?" tutorial presents a small script comprising a script element equipped with a LANGUAGE="LiveScript" attribute but that is otherwise recognizable as classical JavaScript.

The "Live Script" script can be accessed by following the tutorial's Here's the Script! link and is given below:

<script language="LiveScript"><!--
// This script is by Paul Tahan, Jr.

function checkAGE( ) {
	if (!window.confirm("WRITE YOUR OWN MESSAGE IN HERE"))
		history.go(-1);
	return " "; }
document.writeln(checkAGE( ));

// End -->
</script>

(For reasons beyond my understanding, the script element start-tag's beginning < and ending > have been respectively escaped to < and > at the popup.txt page - I've unescaped them in the above code. Other changes: I've switched the script element's HTML-type comments to JavaScript comments and removed the extra right parenthesis character at the end of the confirm( ) parameter string.)

Joe credits the "Live Script" script to a Paul Tahan, Jr.; however, the above script is only slightly different than the script discussed by HTML Goodies' JavaScript Script Tips #5-9, which has a Copyright © JemWeb 1997 credit and which we covered in Blog Entry #55. (The former script at least has a checkAGE( ) function call; a corresponding JemWebCONFIRM( ) call in the latter script is missing.)

Quick deconstruction

The document.writeln(checkAGE( )); line calls the checkAGE( ) function, which first pops up a confirm( ) box:

[The confirm( ) box for the 'Live Script' script]

Upon clicking the button, the if condition returns true and the user is taken back to the previous page by the history.go(-1); command. Upon clicking the button, the if condition returns false; subsequently, a space character is returned to the checkAGE( ) function call and the current (script-running) document is loaded. In effect, the "Live Script" script acts as a gateway for asking the age-old question, "Are you sure you want to enter [this Web page]?", which is the confirm( ) message in Joe's not-really-a-demo for the Script Tips #5-9 script.

Speaking of demos, there should be a script demo at the "Live Script" tutorial page, i.e., the script should run and the confirm( ) box should pop up as the page loads; however, the script was inexplicably taken out of the tutorial source when the HTML Goodies site was overhauled in mid-February 2005. To see Joe's original "Live Script" demo, follow this link to a 1999 edition of the tutorial.

Two more points:

(1) If the "Live Script" script is placed in the document head (and that's where it belongs), then the space that is returned to the checkAGE( ) function call and the newline appended thereto by the document.writeln( ) command will be collapsed to an empty string, and the document body content will begin at the origin of the canvas as it normally would. Alternatively, a return "Some text...";-type statement could be used to place a message (e.g., Hello, Visitor.) at the canvas origin, if you'd rather do that.

(2) Near the end of the tutorial, Joe reports, Also, as far as I can see, it doesn't matter which [confirm( )] button people click on, OK or Cancel. The [current] page loads either way. This would seem to contradict my Quick deconstruction above, but if the script page were accessed in a new window/tab, which would not have a history.go(-1) location, then Joe would in fact be correct. He's not correct if the page is accessed in the same window/tab framing some other page; in this case, clicking the button will definitely return the user to the history.go(-1) page.

Do I really need to put a separate demo in front of you? Oh, why not? In the div below, click normally (don't right-click or control-click) on the here Div A link. When the confirm( ) box pops up, click the button, which should bring you back to Div A. Reclick the Div A link to redisplay the confirm( ) box; click the button to load Div B.

This is Div A.

Click here to test the "Live Script" script.

The next Beyond HTML : JavaScript tutorial, "Advanced JavaScript for Web Developers: onClick and onMouseOver", is very basic (there's nothing remotely "advanced" about it, although at least its demos work) and we won't be covering it, but the sector tutorial after that, "So, You Want A Background JavaScript, Huh?", offers some real 'flesh on the bone', namely, a complicated coloring script that we'll take up in the following entry.

reptile7
- posted by A. Peak @ 5:45 PM

Comments: Post a Comment

<< Home

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)

About Me