spacer
Yehuda Shiran November 23, 1999
Printing Frames
Tips: November 1999

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

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.


People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint