Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How can a particular frame be targeted, from a hyperlink, in JavaScript?
HTML frames provide a convenient way to divide a browser window into multiple sections, where each section can load a separate HTML document. JavaScript allows you to target and manipulate specific frames using several methods through the window.frames property and DOM manipulation.
The frames property is an array-like object containing all the frames (including iframes) on the current page. Here are the main approaches to target a particular frame:
Method 1: Using Frame Index
You can target a specific frame by its index position in the frames collection. The first frame has index 0:
// Target the first frame on the page window.frames[0].location.href = "https://www.example.com";
Method 2: Using Frame Name
If your frame has a name attribute, you can reference it directly by name:
// Target frame with name="myFrame" window.frames["myFrame"].location.href = "https://www.example.com";
Method 3: Using DOM Methods
You can also target frames using standard DOM methods like getElementById() or getElementsByName(), then access the frame's window using contentWindow:
// Using getElementById
document.getElementById("frameId").contentWindow.location.href = "https://www.example.com";
// Using getElementsByName
document.getElementsByName("frameName")[0].contentWindow.location.href = "https://www.example.com";
Complete Working Example
Here's a complete example demonstrating all three methods for targeting frames:
<!DOCTYPE html>
<html>
<head>
<title>Target Frame Example</title>
</head>
<body>
<h2>Frame Targeting Methods</h2>
<button onclick="indexMethod()">Target Using Index</button>
<button onclick="nameMethod()">Target Using Frame Name</button>
<button onclick="domMethod()">Target Using DOM Methods</button>
<button onclick="clearFrame()">Clear Frame</button>
<iframe
name="testFrame"
id="frameId"
width="100%"
height="200px"
srcdoc="<html><body style='background:#f0f0f0; padding:20px;'><h3>Original Frame Content</h3></body></html>">
</iframe>
<script>
function indexMethod() {
const frameDoc = window.frames[0].document;
frameDoc.body.innerHTML = '<div style="padding:20px; background:#e8f5e8;"><h3>Targeted by Index [0]</h3><p>Content loaded using window.frames[0]</p></div>';
}
function nameMethod() {
const frameDoc = window.frames["testFrame"].document;
frameDoc.body.innerHTML = '<div style="padding:20px; background:#e8f0ff;"><h3>Targeted by Name</h3><p>Content loaded using window.frames["testFrame"]</p></div>';
}
function domMethod() {
const frameDoc = document.getElementById("frameId").contentWindow.document;
frameDoc.body.innerHTML = '<div style="padding:20px; background:#fff0e8;"><h3>Targeted by DOM Method</h3><p>Content loaded using getElementById().contentWindow</p></div>';
}
function clearFrame() {
const frameDoc = window.frames[0].document;
frameDoc.body.innerHTML = '<div style="padding:20px; background:#f0f0f0;"><h3>Original Frame Content</h3><p>Frame content has been reset</p></div>';
}
</script>
</body>
</html>
Method Comparison
| Method | Syntax | Best For |
|---|---|---|
| Index | window.frames[0] |
Simple cases, few frames |
| Name | window.frames["name"] |
Named frames, better readability |
| DOM Methods | getElementById().contentWindow |
Modern approach, more flexible |
Security Considerations
When working with frames from different domains, same-origin policy restrictions may prevent access to frame content. Always handle potential security exceptions when manipulating cross-origin frames.
Conclusion
JavaScript provides multiple ways to target specific frames: by index, name, or DOM methods. The DOM method approach using contentWindow is generally preferred for modern web development as it's more explicit and flexible.
645 Views
