Article Categories

Selected Reading

How to load a hyperlink from one iframe to another iframe?

HTML Web Development Front End Technology

Loading content from one iframe to another iframe is a common web development task that enables dynamic content display without reloading the entire page. This technique uses the target attribute of anchor tags to specify which iframe should display the linked content.

Syntax

Following is the syntax for targeting an iframe from a hyperlink

<a href="content.html" target="targetIframeName">Link Text</a>
<iframe name="targetIframeName" src="" width="400" height="300"></iframe>

The target attribute in the anchor tag must match the name attribute of the destination iframe.

How It Works

When a hyperlink with a target attribute is clicked, the browser loads the specified URL into the iframe whose name matches the target value. This allows one iframe to control what displays in another iframe, creating interactive layouts where navigation and content are separated.

Example 1 Loading Images Between Iframes

This example demonstrates how links in one iframe can display images in another iframe. The setup requires two HTML files and image files.

Main Page (iFrameFile1.html)

<!DOCTYPE html>
<html>
<head>
   <title>Image Loading Between Iframes</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
   <h2>Image Gallery Demo</h2>
   <iframe src="iframeFile2.html" 
      name="iframeUpper" 
      width="70%" 
      height="300" 
      style="border: 2px solid #ccc; margin-bottom: 20px;">
   </iframe>
   <br>
   <iframe src="" 
      name="iframeBottom" 
      width="400" 
      height="250" 
      style="border: 2px solid #999;">
   </iframe>
</body>
</html>

Navigation Page (iFrameFile2.html)

<!DOCTYPE html>
<html>
<head>
   <title>Image Navigation</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px; background-color: #f5f5f5;">
   <h1 style="color: purple; margin-bottom: 10px;">Beautiful Birds Gallery</h1>
   <h2 style="color: #008080; margin-bottom: 20px;">Click the links below</h2>
   
   <p style="margin: 15px 0;">
      <a href="https://via.placeholder.com/350x200/4CAF50/white?text=Cute+Bird" 
         target="iframeBottom" 
         style="color: #d2691e; text-decoration: none; font-size: 18px; font-weight: bold;">
         ? View Cute Bird
      </a>
   </p>
   
   <p style="margin: 15px 0;">
      <a href="https://via.placeholder.com/350x200/2196F3/white?text=Bird+Friends" 
         target="iframeBottom" 
         style="color: #d2691e; text-decoration: none; font-size: 18px; font-weight: bold;">
         ?? View Bird Friends
      </a>
   </p>
</body>
</html>

When you click the links in the upper iframe, the corresponding images load in the bottom iframe. The target="iframeBottom" attribute directs the browser to display the linked content in the iframe named "iframeBottom".

Example 2 Loading Video Content

This example shows how to load video content into different iframes using various target options.

Main Video Page (iFrameFile11.html)

<!DOCTYPE html>
<html>
<head>
   <title>Video Loading Between Iframes</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
   <h2>Video Player Demo</h2>
   <iframe src="iframeFile22.html" 
      name="iframeUpper" 
      width="70%" 
      height="300" 
      style="border: 2px solid #ccc; margin-bottom: 20px;">
   </iframe>
   <br>
   <iframe src="" 
      name="iframeBottom" 
      width="400" 
      height="250" 
      style="border: 2px solid #999;">
   </iframe>
</body>
</html>

Video Navigation Page (iFrameFile22.html)

<!DOCTYPE html>
<html>
<head>
   <title>Video Navigation</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px; background-color: #f0f8ff;">
   <h1 style="color: purple; margin-bottom: 10px;">Bird Video Collection</h1>
   <h2 style="color: #008080; margin-bottom: 20px;">Choose your viewing option</h2>
   
   <p style="margin: 15px 0;">
      <a href="https://www.w3schools.com/html/mov_bbb.mp4" 
         target="iframeBottom" 
         style="color: #d2691e; text-decoration: none; font-size: 16px; padding: 10px; border: 2px solid #d2691e; border-radius: 5px; display: inline-block;">
         ? Play Video in Bottom Frame
      </a>
   </p>
   
   <p style="margin: 15px 0;">
      <a href="https://www.w3schools.com/html/mov_bbb.mp4" 
         target="_self" 
         style="color: #d2691e; text-decoration: none; font-size: 16px; padding: 10px; border: 2px solid #d2691e; border-radius: 5px; display: inline-block;">
         ? Play Video in This Frame
      </a>
   </p>
</body>
</html>

In this example, the first link uses target="iframeBottom" to load video in the bottom iframe, while the second link uses target="_self" to replace the content of the current iframe.

Target Attribute Options

The target attribute supports several values for different loading behaviors

Target Value	Description	Usage Example
`iframeName`	Loads content into the iframe with the specified name	`target="bottomFrame"`
`_self`	Loads content in the same iframe (default behavior)	`target="_self"`
`_parent`	Loads content in the parent frame	`target="_parent"`
`_top`	Loads content in the top-level window	`target="_top"`
`_blank`	Opens content in a new window or tab	`target="_blank"`

Complete Working Example

Following is a complete working example that demonstrates iframe targeting with embedded content

<!DOCTYPE html>
<html>
<head>
   <title>Complete Iframe Targeting Demo</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2 style="text-align: center;">Iframe Content Loading Demo</h2>
   
   <!-- Navigation iframe -->
   <iframe srcdoc='
   <html>
   <body style="font-family: Arial; text-align: center; padding: 20px; background: #f0f0f0;">
      <h3>Navigation Menu</h3>
      <p><a href="data:text/html,<h1>Welcome Page</h1><p>This is the welcome content.</p>" target="contentFrame" style="color: blue; text-decoration: none; font-weight: bold;">? Welcome</a></p>
      <p><a href="data:text/html,<h1>About Us</h1><p>Learn more about our company.</p>" target="contentFrame" style="color: blue; text-decoration: none; font-weight: bold;">?? About</a></p>
      <p><a href="data:text/html,<h1>Contact</h1><p>Get in touch with us.</p>" target="contentFrame" style="color: blue; text-decoration: none; font-weight: bold;">? Contact</a></p>
   </body>
   </html>' 
   name="navFrame" 
   width="100%" 
   height="200" 
   style="border: 2px solid #333; margin-bottom: 10px;">
   </iframe>
   
   <!-- Content display iframe -->
   <iframe src="data:text/html,<div style='text-align:center; padding:50px; color:#666;'><h2>Click a navigation link above</h2></div>" 
   name="contentFrame" 
   width="100%" 
   height="300" 
   style="border: 2px solid #666;">
   </iframe>
</body>

Saba Hilal

Updated on: 2026-03-16T21:38:54+05:30

818 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next