spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column36

JavaScript and Frames, Part I (3)

Developer News
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source

Forcing Frames

In the previous page, we showed you how to escape frames. Now we're going to teach you how to force frames. 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);

Go ahead and try loading one of the frames as a separate file. You'll find out that this is not possible. The whole frameset will be always forced.

http://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

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

Solutions

Whitepapers and eBooks

Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Microsoft PDF: Top 10 Reasons to Move to Server Virtualization with Hyper-V
Microsoft PDF: Six Reasons Why Microsoft's Hyper-V Will Overtake Vmware
Microsoft Step-by-Step Guide: Hyper-V and Failover Clustering
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Microsoft PDF: Top 11 Reasons to Upgrade to Windows Server 2008
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms
   PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008
Go Parallel Article: Q&A with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
HP eBook: Guide to Storage Networking
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Attend the IBM Service Management World Tour--Register now!
Video: Intel Launches Data Center Efficiency Initiative
Intel Podcast: Talking vPro
Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
HP Video: Is Your Data Center Ready for a Real World Disaster?
Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices
HP On Demand Webcast: Virtualization in Action
   Go Parallel Video: Performance and Threading Tools for Game Developers
Rackspace Hosting Center: Customer Videos
Intel vPro Developer Virtual Bootcamp
HP Disaster-Proof Solutions eSeminar
HP On Demand Webcast: Discover the Benefits of Virtualization
MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

IBM e-Kit: Reduce Complexity and Cost with BladeCenter
Amyuni Download: PDF & XPS Engine for Your .NET and ActiveX Applications
Acresso Download: Try InstallShield 2009
Microsoft Download: Silverlight 2 SDK
Access Crystal Reports for Eclipse Basic Edition (Free)
30-Day Trial: SPAMfighter Exchange Module
   IBM Energy Efficiency e-Kit Shows You How to Reduce Costs
Red Gate Download: SQL Toolbelt
Iron Speed Designer Application Generator
Microsoft Download: Silverlight 2 Developer Runtime (Windows)
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

VMware Online Virtualization Forum: Learn about the benefits of a virtual infrastructure, network with industry experts--Register today!
Demo: Dual-Core Intel Itanium 2 Processor
IBM IT Innovation Article: Green Servers Provide a Competitive Advantage
   Microsoft Article: Making Designer/Developer Collaboration a Reality
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters > 
 The latest from internet.com
Fixing MySQL Replication · Firewall Guide: First Steps to Securing the Enterprise · VoxOx Tames the Tumultuous Communications Tangle


Created: March 1, 1999
Revised: March 1, 1999

URL: http://www.webreference.com/js/column36/forcing.html