November 23, 1999 - Printing Frames

November 23, 1999
Printing Frames

Tips: November 1999

Yehuda Shiran, Ph.D.
Doc JavaScript

Since posting our original tip about cross-browser printing, we have received many mails regarding frame-based Web pages. Let's take a look at a simple HTML document (991123a.html):

<HTML>
<HEAD><TITLE>An Example</TITLE></HEAD>
<FRAMESET COLS="30%, *">
<FRAME SRC="991123b.html" NAME="control">
<FRAME SRC="991123c.html" NAME="main">
</FRAMESET>
</HTML>

This document consists of two frames. The left one is called "control," while the other frame is "main." We want to implement a link in the "control" frame, which prints the content of the "main" frame.

In Netscape Navigator, we just need to specify the desired window object, as shown in the following examples:

parent.main.print();
parent.frames.main.print();
parent.frames["main"].print();
parent.frames[1].print(); // main is the second frame

With any of these statements, Navigator prints the content of the "main" frame. Note that it isn't possible to print the parent document with Navigator, so if you call parent.print() the browser ignores the statement.

Internet Explorer is a different story. Regardless of the specified window object, the browser prints the frame that currently has focus. The Print dialog box enables the user to change the selection:

Print Frames

"Only the selected frame" is the default option, and it applies to the focused frame. So in order to print the "main" frame from a link in our "control" frame, we must use two statements:

parent.main.focus();
parent.main.print();

The focus() method gives focus to a frame but the focus is not visually apparent (for example, the frame's border is not darkened).

Once we've finished printing the "main" frame, we can return the focus to the link in the "control" frame (it originally received focus when we clicked it):

link.focus();

If we want to support Internet Explorer 4.0x, we need to provide a corresponding workaround. As in Internet Explorer 5.0x, we need to give focus to the desired frame. However, on Internet Explorer 4.0x we must wait before we actually print the page:

setTimeout("vbPrintPage(); link.focus();", 100);

We'll wait 100 milliseconds before printing the page. The following code lists our final cross-browser printing function:

<SCRIPT LANGUAGE="JavaScript">
<!--
var da = (document.all) ? 1 : 0;
var pr = (window.print) ? 1 : 0;
var mac = (navigator.userAgent.indexOf("Mac") != -1); 
function printPage(frame, arg) {
  if (frame == window) {
    printThis();
  } else {
    link = arg; // a global variable 
    printFrame(frame);
  }
  return false;
}
function printThis() {
  if (pr) { // NS4, IE5
    window.print();
  } else if (da && !mac) { // IE4 (Windows)
    vbPrintPage();
  } else { // other browsers
    alert("Sorry, your browser doesn't support this feature.");
  }
}
function printFrame(frame) {
  if (pr && da) { // IE5
    frame.focus();
    window.print();
    link.focus();
  } else if (pr) { // NS4
    frame.print();
  } else if (da && !mac) { // IE4 (Windows)
    frame.focus();
    setTimeout("vbPrintPage(); link.focus();", 100);
  } else { // other browsers
    alert("Sorry, your browser doesn't support this feature.");
  }
}
if (da && !pr && !mac) with (document) {
  writeln('<OBJECT ID="WB" WIDTH="0" HEIGHT="0" CLASSID="clsid:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>');
  writeln('<' + 'SCRIPT LANGUAGE="VBScript">');
  writeln('Sub window_onunload');
  writeln('  On Error Resume Next');
  writeln('  Set WB = nothing');
  writeln('End Sub');
  writeln('Sub vbPrintPage');
  writeln('  OLECMDID_PRINT = 6');
  writeln('  OLECMDEXECOPT_DONTPROMPTUSER = 2');
  writeln('  OLECMDEXECOPT_PROMPTUSER = 1');
  writeln('  On Error Resume Next');
  writeln('  WB.ExecWB OLECMDID_PRINT, OLECMDEXECOPT_DONTPROMPTUSER');
  writeln('End Sub');
  writeln('<' + '/SCRIPT>');
}
// -->
</SCRIPT>
<A HREF="#" onClick="return printPage(window)">Print Control</A><BR>
<A HREF="#" onClick="return printPage(parent.main, this)">Print Main</A>

As you can see, the printPage() function can print the current frame (window) or a different frame (parent.main). If you want to print a different frame, the second argument must be the keyword this, specifying the link object that the user pressed (so we can give it focus after we have finished printing the other frame).

We recommend that you use the DONTPROMPTUSER for Internet Explorer 4.0x, due to a bug in the browser. If you use the PROMPTUSER constant, and the user presses Cancel in the Print dialog box, the dialog box pops up again (this only happens once, even if Cancel is pressed again). Go ahead and take a look at a live example of the entire script.

November 23, 1999 - Printing Frames

Find a programming school near you