Webpage Frame
Master modern webpage frame implementation using iframes. Create responsive, interactive frames with HTML, CSS, and JavaScript.
Understanding Webpage Frames
Webpage frames are a powerful technique for creating multi-section layouts where different content areas can be loaded and managed independently. While traditional HTML frames are deprecated, modern iframe-based frames offer superior flexibility, security, and responsive design capabilities.
Using iframes for webpage frames allows developers to create complex layouts, embed external content, and maintain separate browsing contexts within a single page structure.
Key Advantage: Modern iframe frames provide better browser compatibility, responsive design, security features, and maintainability compared to deprecated HTML frames.
Basic Frame Code Examples
Simple Two-Column Frame Layout
Create a basic two-column frame layout using iframes:
<div class="frame-container">
<iframe
src="https://example.com/left-content"
class="frame-left"
title="Left frame content">
</iframe>
<iframe
src="https://example.com/right-content"
class="frame-right"
title="Right frame content">
</iframe>
</div>
<style>
.frame-container {
display: flex;
gap: 20px;
height: 600px;
}
.frame-left, .frame-right {
flex: 1;
border: 1px solid #ddd;
border-radius: 8px;
}
</style>Result: Two equal-width frames side by side with responsive layout
Header-Sidebar-Content Frame Structure
Classic three-section frame layout with header, sidebar, and main content:
<div class="frame-layout">
<iframe
src="https://example.com/header"
class="frame-header"
title="Page header">
</iframe>
<div class="frame-main-area">
<iframe
src="https://example.com/sidebar"
class="frame-sidebar"
title="Navigation sidebar">
</iframe>
<iframe
src="https://example.com/main-content"
class="frame-content"
title="Main content area">
</iframe>
</div>
</div>
<style>
.frame-layout {
display: flex;
flex-direction: column;
height: 100vh;
}
.frame-header {
height: 80px;
border-bottom: 2px solid #333;
}
.frame-main-area {
display: flex;
flex: 1;
}
.frame-sidebar {
width: 250px;
border-right: 1px solid #ddd;
}
.frame-content {
flex: 1;
}
</style>HTML Frames Examples: Modern Implementation
Responsive Grid Frames
<div class="grid-frames">
<iframe
src="https://example.com/top-left"
class="frame-grid-item"
title="Top left content">
</iframe>
<iframe
src="https://example.com/top-right"
class="frame-grid-item"
title="Top right content">
</iframe>
<iframe
src="https://example.com/bottom-left"
class="frame-grid-item"
title="Bottom left content">
</iframe>
<iframe
src="https://example.com/bottom-right"
class="frame-grid-item"
title="Bottom right content">
</iframe>
</div>
<style>
.grid-frames {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 300px);
gap: 20px;
padding: 20px;
}
.frame-grid-item {
border: 1px solid #ccc;
border-radius: 8px;
transition: transform 0.2s;
}
.frame-grid-item:hover {
transform: scale(1.02);
}
</style>Tabbed Frame Interface
<div class="tabbed-frames">
<div class="frame-tabs">
<button class="tab-btn active" onclick="showFrame('frame1')">Content 1</button>
<button class="tab-btn" onclick="showFrame('frame2')">Content 2</button>
<button class="tab-btn" onclick="showFrame('frame3')">Content 3</button>
</div>
<div class="frame-content">
<iframe id="frame1" src="https://example.com/content1" class="frame-tab active"></iframe>
<iframe id="frame2" src="https://example.com/content2" class="frame-tab"></iframe>
<iframe id="frame3" src="https://example.com/content3" class="frame-tab"></iframe>
</div>
</div>
<style>
.frame-tabs {
display: flex;
border-bottom: 2px solid #ddd;
}
.tab-btn {
padding: 12px 24px;
border: none;
background: #f5f5f5;
cursor: pointer;
}
.tab-btn.active {
background: #007bff;
color: white;
}
.frame-tab {
display: none;
width: 100%;
height: 500px;
border: none;
}
.frame-tab.active {
display: block;
}
</style>
<script>
function showFrame(frameId) {
// Hide all frames
document.querySelectorAll('.frame-tab').forEach(frame => {
frame.classList.remove('active');
});
// Remove active class from all buttons
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('active');
});
// Show selected frame
document.getElementById(frameId).classList.add('active');
// Activate corresponding button
event.target.classList.add('active');
}
</script>Masonry Frame Layout
<div class="masonry-frames">
<iframe
src="https://example.com/tall-content"
class="frame-masonry tall"
title="Tall content">
</iframe>
<iframe
src="https://example.com/wide-content"
class="frame-masonry wide"
title="Wide content">
</iframe>
<iframe
src="https://example.com/square-content"
class="frame-masonry square"
title="Square content">
</iframe>
</div>
<style>
.masonry-frames {
column-count: 3;
column-gap: 20px;
padding: 20px;
}
.frame-masonry {
break-inside: avoid;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
.frame-masonry.tall {
height: 400px;
}
.frame-masonry.wide {
height: 200px;
}
.frame-masonry.square {
height: 300px;
}
</style>Dynamic Frame Loading
<div class="dynamic-frames">
<div class="frame-controls">
<button onclick="addFrame()">Add Frame</button>
<button onclick="removeFrame()">Remove Frame</button>
</div>
<div id="frameContainer" class="frame-container">
<iframe
src="https://example.com/default"
class="dynamic-frame"
title="Default frame">
</iframe>
</div>
</div>
<script>
let frameCount = 1;
function addFrame() {
frameCount++;
const container = document.getElementById('frameContainer');
const newFrame = document.createElement('iframe');
newFrame.src = `https://example.com/content${frameCount}`;
newFrame.className = 'dynamic-frame';
newFrame.title = `Frame ${frameCount}`;
container.appendChild(newFrame);
}
function removeFrame() {
const frames = document.querySelectorAll('.dynamic-frame');
if (frames.length > 1) {
frames[frames.length - 1].remove();
frameCount--;
}
}
</script>
<style>
.frame-controls {
margin-bottom: 20px;
}
.frame-controls button {
margin-right: 10px;
padding: 8px 16px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.dynamic-frame {
width: 300px;
height: 200px;
margin: 10px;
border: 1px solid #ddd;
border-radius: 8px;
}
</style>Website Frame Implementation Techniques
Responsive Frame System
Create a responsive frame system that adapts to different screen sizes:
<div class="responsive-frames">
<iframe
src="https://example.com/navigation"
class="frame-nav"
title="Navigation frame">
</iframe>
<iframe
src="https://example.com/main"
class="frame-main"
title="Main content frame">
</iframe>
<iframe
src="https://example.com/sidebar"
class="frame-sidebar"
title="Sidebar frame">
</iframe>
</div>
<style>
.responsive-frames {
display: grid;
grid-template-areas:
"nav nav"
"main sidebar";
grid-template-columns: 1fr 300px;
grid-template-rows: 60px 1fr;
gap: 20px;
height: 100vh;
padding: 20px;
}
.frame-nav {
grid-area: nav;
border: 1px solid #ddd;
border-radius: 8px;
}
.frame-main {
grid-area: main;
border: 1px solid #ddd;
border-radius: 8px;
}
.frame-sidebar {
grid-area: sidebar;
border: 1px solid #ddd;
border-radius: 8px;
}
/* Mobile responsive */
@media (max-width: 768px) {
.responsive-frames {
grid-template-areas:
"nav"
"main"
"sidebar";
grid-template-columns: 1fr;
grid-template-rows: 60px 1fr 200px;
}
}
</style>Frame Communication System
Implement communication between frames using postMessage API:
<div class="communicating-frames">
<iframe
id="frameA"
src="https://example.com/frame-a"
class="frame-comm"
title="Frame A">
</iframe>
<iframe
id="frameB"
src="https://example.com/frame-b"
class="frame-comm"
title="Frame B">
</iframe>
<div class="frame-controls">
<button onclick="sendMessage('frameA', 'Hello from main page!')">
Send to Frame A
</button>
<button onclick="sendMessage('frameB', 'Hello from main page!')">
Send to Frame B
</button>
</div>
</div>
<script>
function sendMessage(frameId, message) {
const frame = document.getElementById(frameId);
frame.contentWindow.postMessage(message, '*');
}
// Listen for messages from frames
window.addEventListener('message', function(event) {
console.log('Message received:', event.data);
// Handle different message types
if (event.data.type === 'navigation') {
updateNavigation(event.data.content);
} else if (event.data.type === 'content') {
updateContent(event.data.content);
}
});
function updateNavigation(content) {
// Update navigation based on frame message
console.log('Updating navigation:', content);
}
function updateContent(content) {
// Update main content based on frame message
console.log('Updating content:', content);
}
</script>
<style>
.communicating-frames {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
height: 600px;
}
.frame-comm {
border: 1px solid #ddd;
border-radius: 8px;
}
.frame-controls {
grid-column: 1 / -1;
text-align: center;
margin-top: 20px;
}
.frame-controls button {
margin: 0 10px;
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>Advanced Frame Patterns & Best Practices
Performance Optimization
- • Use lazy loading for off-screen frames
- • Implement frame preloading strategies
- • Optimize frame dimensions and content
- • Use intersection observer for frame visibility
- • Implement frame caching mechanisms
Security & Accessibility
- • Implement proper sandbox attributes
- • Use referrer policy controls
- • Ensure keyboard navigation support
- • Provide meaningful frame titles
- • Implement frame fallback content
Ready to Create Professional Webpage Frames?
Now that you understand webpage frame implementation, use our iframe generator tool to create custom frame layouts with advanced features.
Try Iframe Generator