Setting a Target for Frame

Marc0

Well-known member
Registered
Joined
Jun 6, 2012
Messages
888
Points
28
If your site uses frames, it's common to have a framed navigation bar that loads the different pages into the main frame. The main frame is the target for the links in the navigation bar, and to load that main frame using HTML, you use the target attribute of the <a> tag. But if you want to use both frames and XHTML Strict, JavaScript is the only way to set the target. That's because the target attribute isn't allowed in XHTML Strict, and you have to set the target in order to use frames.
When you're using HTML Strict in your frameset, you need JavaScript to set frame targets.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Nav Bar</title>
     <script type="text/javascript" src="script04.js"></script>
</head>
<body>
     <h1>Navigation Bar</h1>
     <h2>
     <a href="frame4a.html">Page 1</a><br />
     <a href="frame4b.html">Page 2</a><br />
     <a href="frame4c.html">Page 3</a>
     </h2>
</body>
</html>
Code:
And here is the JavaScript you need to do the job.
Code:
window.onload = initLinks;

function initLinks() {
     for (var i=0; i<document.links.length; i++) {
         document.links[i].target = "content";
     }
}
Here's a frame acting as a navigation bar with the content page appearing in a content frame.

To set the target for a frame:

Code:
window.onload = initLinks;
When the page loads, call the initLinks() function.

Code:
function initLinks() {
  for (var i=0; i<document.links. length; i++) {
     document.links[i].target = "content";
  }
}
This function loops through all of the links on the page. When the loop finds a link, it sets the target property to the string "content". And that's all it takes.

If JavaScript is turned off, visitors will find that the first link that gets clicked loads into the navigation frame, not the content frame. Sorry, but that's the way frames and XHTML Strict work.
 
Older Threads
Replies
0
Views
3,505
Replies
2
Views
4,150
Replies
1
Views
3,119
Replies
30
Views
15,199
Replies
20
Views
15,677
Newer Threads
Replies
0
Views
3,146
Replies
1
Views
3,519
Replies
3
Views
5,303
Replies
3
Views
5,847
Latest Threads
Replies
0
Views
614
Replies
2
Views
601
Replies
1
Views
527
Replies
2
Views
1,124
Replies
1
Views
736
Recommended Threads
Replies
13
Views
5,389
Replies
10
Views
7,323
Replies
2
Views
1,412
Replies
10
Views
5,430
UVM

Sponsors

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top