- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How can a particular frame be targeted, from a hyperlink, in JavaScript?
HTML frames gives a convenient way to divide a browser window into multiple sections.
Where each section can load a separate HTML document. We can use JavaScript to load the content into a particular frame using the frames property of the window object. The frames property is an array-like object containing all the frames (including iframes) on the current page.
There are many ways in which we can use window.frames[] property to load the content of a document into the frame. Let’s look them one by one −
1. Using Index
To target a specific frame, you can use the frame's index or name. For example, to target the first frame on the page, you can use the following code −
window.frames[0].document.location.href = "http://www.example.com"
2. Using Frame Name
To target a frame with its name the below method can be used. Suppose the name of the frame is “frame_name” −
window.frames["frame_name"].document.location.href = "http://www.example.com";
3. Using getElementById and getElementByName
You can also target the frames using getElementById() or getElementsByName() method and then use the method contentWindow to access the frame window like this −
document.getElementById("frame_id").contentWindow.location.href = "http://www.example.com"; document.getElementsByName("frame_name")[0].contentWindow.location.href = "http://www.example.com";
Example
The following is the complete working code snippet including all these methods −
<!DOCTYPE html> <html> <head> <title>Target a frame</title> </head> <body> <button onclick="indexMethod()">Using Index</button> <button onclick="nameMethod()">Using Frame Name</button> <button onclick="queryMethod()">Using Query Methods</button> <iframe src="" height="150px" width="100%" name="frame_name" id="frame_id" srcdoc="<html> <body style='background-color:#ccc;'> <h1>Testing iframe</h1> </body> </html>"> </iframe> </body> <script> const indexMethod = () => { const child = document.createElement('p'); child.innerText = 'added inside frame'; window.frames[0].document.body.appendChild(child); }; const nameMethod = () => { const child = document.createElement('p'); child.innerText = 'added inside frame'; window.frames["frame_name"].document.body.appendChild(child); }; const queryMethod = () => { const child = document.createElement('p'); child.innerText = 'added inside frame'; document.getElementById("frame_id").contentWindow.document.body.appendChild(child); }; </script> </html>