April 5, 2000 - Forcing Frames

April 5, 2000
Forcing Frames

Tips: April 2000

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

If your Web site is based on frames, and you don't want the user to be able to load an inner page in a full window, you can rebuild the frame-setting document when the user attempts to load such a page. First, take a look at the following HTML document:

<HTML>
<HEAD>
<TITLE>Canvas</TITLE>
</HEAD>
<FRAMESET COLS="200, *">
   <FRAME SRC="frame1.html" NAME="leftcolumn">
   <FRAMESET ROWS="100, *">
      <FRAME SRC="frame2.html"  NAME="toprow">
      <FRAME SRC="frame3.html" NAME="bottomrow">
   </FRAMESET>
</FRAMESET>
</HTML>

This document is named canvas.html. The upper and left frames are used for navigation purposes, while the main frame displays the actual content of the site. canvas.html initially loads frame3.html as the content page, but other documents can be loaded in that frame as well. Let's assume the user loads a document named frame4.html in the main frame. Everything looks great. We now have a frame-setting document named canvas.html, and three child frames named frame1.html, frame2.html, and frame4.html.

But what happens if the user attempts to load frame4.html in a separate window? We need to force the frames. First, we'll add a simple script to the HEAD portion of each one of the inner documents (frame1.html, frame2.html, frame3.html, and frame4.html).

<SCRIPT LANGUAGE="JavaScript">
<!--

if (top.location.href.indexOf("canvas.html") == -1)
  top.location.href = "canvas.html?pageURL&frameNum";

// -->
</SCRIPT>

frameNum needs to be replaced with the index of the target frame. Use 0 (the first frame) for frame1.html, 1 (the second frame) for frame2.html, and 2 (the third frame) for frame3.html and frame4.html. For example, in frame4.html the script would be:

<SCRIPT LANGUAGE="JavaScript">
<!--

if (top.location.href.indexOf("canvas.html") == -1)
  top.location.href = "canvas.html?frame4.html&2";

// -->
</SCRIPT>

Now let's see the new version of canvas.html:

<HTML>
<HEAD>
<TITLE>Canvas</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

var ar0 = "frame1.html";
var ar1 = "frame2.html";
var ar2 = "frame3.html";

var str = location.search;
var pos = str.indexOf("&");
if (pos != -1) {
  var num = str.substring(pos + 1, str.length);
  window["ar" + num] = str.substring(1, pos);
}

// -->
</SCRIPT>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--

document.write(
'<FRAMESET COLS="200, *">',
  '<FRAME SRC="', ar0, '" NAME="leftcolumn">',
  '<FRAMESET ROWS="100, *">',
    '<FRAME SRC="', ar1, '" NAME="toprow">',
    '<FRAME SRC="', ar2, '" NAME="bottomrow">',
  '</FRAMESET>',
'</FRAMESET>'
);

// -->
</SCRIPT>
</HTML>

We start by assigning the three default frames, frame1.html, frame2.html, and frame3.html to three variables, ar0, ar1, and ar3, respectively:

var ar0 = "frame1.html";
var ar1 = "frame2.html";
var ar2 = "frame3.html";

These three files are the the basis of the the frame set. Any subsequent change will be on top of these three initial frames. Then, we extract the location.search string:

var str = location.search;

This string begins after the question mark at the URL. In the example above, we added a string to the canvas.html URL:

  top.location.href = "canvas.html?frame4.html&2";

The string location.search will be equal to frame4.html&2 in this case. In order to find the frame number at the end of this string, we use the String's indexOf() method to get the &'s position:

var pos = str.indexOf("&");

And we take the substring starting just after the &, and ending at the end of the URL:

  var num = str.substring(pos + 1, str.length);

Now that we know both the frame number and the file name, we can assign the file to the frame:

  window["ar" + num] = str.substring(1, pos);

Learn more about frames in Column 36, JavaScript and Frames, Part I .

People who read this tip also read these tips:

Escaping Frames

Whitepapers and eBooks

IBM Articles: A Smarter Business Needs Smarter Technology
Intel Xeon Processor Increases Server Efficiency and Capabilities
Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise
Oracle Whitepaper: Using Oracle In-Memory Database Cache to Accelerate the Oracle Database
Oracle Whitepapers - Innovation for IT Leaders
Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT
Internet.com eBook: IT Manager's Guide to Social Networking

Internet.com eBook: Get Ready for Windows 7
Microsoft Article: Expression Web 3�New Features for PHP Developers
Whitepapers: Manage Your Business Infrastracture with IBM
Whitepaper: Maximize Your Storage Investment with HP
Internet.com eBook: Becoming a Better Project Manager
Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Webcast: Connecting PHP to Microsoft Technologies
Video: Microsoft Partner Program Benefits
Video: Windows Azure Debugging Tips

SAP BusinessObjects Webcast: Unlock the Power of Reporting with Crystal Reports
IBM Webcast: Speed Business Innovation with Reduced Cost and Risk
MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Downloads & Free Trials: Microsoft's New Efficiency Resource Center
Microsoft SQL Server 2008 Trial Software Evaluation
Get the Windows 7 SDK

Free Trial: Red Gate SQL Backup Pro 6
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products
All About Botnets

HP PartnerOne: Your customers don't want just any solution. They want the right solution.
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

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

DiVitas's Mobile UC Now Available on the Latest Devices · Review: FON Fonera 2.0n · Chip Market Recovering From '08 Collapse