1. Technology

Targeting Links in HTML IFrames and Frames

Open Links Where You Want them to Open

By

When you create a document to be inside an IFRAME, any links in that frame will automatically open in that same frame. But with the target attribute on the link (the A element or AREA element) you can decide where your links should open.

You can choose to give your iframes a unique name with the id attribute and then point your links at that frame with the ID as the value of the target attribute:

<iframe src="page.html" id="page">
<a href="new.html" target="page">

If you add a target to an ID that doesn't exist in the current browser session, this will open the link in a new browser window, with that name. After the first time, any links that point to that named target will open in the same new window.

But if you don't want to name every window or every frame with an ID, you can still target some specific windows without needing a named window or frame. These are called the standard targets.

The Four Target Keywords

There are four target keywords that don't require a named frame. These keywords allow you to open links in specific areas of the web browser window that might not have an ID associated with them. These are targets that web browsers recognize:

  • _self
    This is the default target for any anchor tag. If you don't set the target attribute or you use this target, the link will open in the same window or frame that the link is in.
  • _parent
    Iframes are embedded inside web pages. And you could embed an iframe in a page that is inside another iframe on another web page. When you set the target attribute to _parent the link will open in the web page that is holding the iframe.
  • _top
    In most situations with iframes, this target will open links in the same way that the _parent target does. But if there is an IFRAME inside an IFRAME, the _top target opens links in the highest level window in the series, removing all the iframes.
  • _blank
    This is the most commonly used target—it opens the link in an entirely new window, similar to a popup.

How to Choose the Names of Your Frames

When you build a web page with iframes, it's a good idea to give each one a specific name. This helps you remember what they are for and allows you to send links to those specific frames.

I like to name my iframes for what they are for. For example:

<iframe src="links.html" id="links">
<iframe src="http://www.newdomain.com/" id="external-document">

Using HTML Frames With Targets

HTML5 makes frames and framesets obsolete, but if you're still using HTML 4.01, you can target specific frames in the same way you target iframes. You give the frames names with the id attribute:

<frame src="frame1.html" id="myFrame">

Then, when a link in another frame (or window) has the same target, the link will open in that frame:

<a href="frame2.html" target="myFrame">

The four target keywords also work with frames. The _parent opens in the enclosing frame, _self opens in the same frame, _top opens in the same window, but outside of the frameset, and _blank opens in a new window or tab (depending upon the browser).

Setting a Default Target

You can also set a default target on your web pages using the BASE element. You set the target attribute to the name of the iframe (or frame in HTML 4.01) you want all links to open in. You can also set default targets of one of the four target keywords. Here's how to write a default target for a page:

<base target="_top">

The BASE element belongs in the HEAD of your document. It is a void element, so in XHTML, you would include the closing slash:

<base target="_top" />

How to Use the HTML BASE Element

©2014 About.com. All rights reserved.