The basic concept of a frameset

Author：Chuan Chen 阅读数：33044人阅读分类： HTML

Frameset was an early HTML technology used to divide browser windows, allowing multiple independent HTML documents to be loaded within the same page. Although modern web development has gradually phased out frameset, understanding its basic concepts is still helpful for comprehending legacy projects or specific use cases.

Basic Structure of Frameset

Frameset is defined using the <frameset> tag, which replaces the traditional <body> tag in an HTML document. Its core attributes include:

cols: Vertically divides the window, defining the width ratio of each column
rows: Horizontally divides the window, defining the height ratio of each row

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
    <title>Frameset Example</title>
</head>
<frameset cols="25%,50%,25%">
    <frame src="left.html">
    <frame src="main.html">
    <frame src="right.html">
</frameset>
</html>

Nested Use of Frames

Frameset supports multi-level nesting to achieve complex layouts:

<frameset rows="20%,80%">
    <frame src="header.html">
    <frameset cols="30%,70%">
        <frame src="nav.html">
        <frame src="content.html">
    </frameset>
</frameset>

Specific Attributes of the Frame Tag

Each <frame> element can be configured with the following key attributes:

name: Names the frame for hyperlink targeting
scrolling: Controls scrollbar display (auto|yes|no)
noresize: Prevents users from resizing the frame
marginwidth/marginheight: Sets margins

<frame src="chat.html" name="chatFrame" noresize scrolling="no">

Target Frames and Link Control

Use the target attribute to specify where links open:

<!-- In the navigation frame -->
<a href="chapter1.html" target="mainFrame">Chapter 1</a>
<a href="chapter2.html" target="mainFrame">Chapter 2</a>

<!-- Corresponding frameset definition -->
<frameset cols="200,*">
    <frame src="nav.html" name="navFrame">
    <frame src="welcome.html" name="mainFrame">
</frameset>

Noframes Fallback Content

Provides fallback content for browsers that do not support frames:

<frameset cols="50%,50%">
    <frame src="left.html">
    <frame src="right.html">
    <noframes>
        <body>
            <p>Your browser does not support frames. Please <a href="no-frames.html">visit the frameless version</a>.</p>
        </body>
    </noframes>
</frameset>

JavaScript Communication Between Frames

Different frames can interact via the parent object:

<!-- In frameA.html -->
<script>
function showMessage() {
    parent.frames["frameB"].document.getElementById("display").innerHTML = "Hello!";
}
</script>

<!-- In frameB.html -->
<div id="display"></div>

Security Limitations of Frameset

Modern browsers impose strict restrictions on framesets:

Cross-origin frames cannot directly access each other's DOM
Certain HTTP headers (e.g., X-Frame-Options) can block frame loading
Poor responsiveness and mobile device support

Comparison with Modern Alternatives

Compared to modern layout technologies, frameset has significant drawbacks:

<!-- Modern alternative example: Flexbox -->
<div style="display: flex;">
    <div style="flex: 1;">Left content</div>
    <div style="flex: 3;">Main content area</div>
</div>

<!-- Alternative: iframe -->
<div class="container">
    <iframe src="widget.html" class="responsive-iframe"></iframe>
</div>

Practical Use Cases

Frameset may still be used in specific scenarios:

Legacy system maintenance
Plugin systems requiring strict isolation
Fixed layouts for certain admin backends

<!-- Classic three-column admin layout -->
<frameset cols="200px,*,200px">
    <frame src="menu.html">
    <frame src="dashboard.html" name="main">
    <frame src="notifications.html">
</frameset>