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

Sometimes, the task is to click a link in one container and to display the content in another container. In HTML, iframes are used to easily show the content in specified area on the page. In this article, using two different examples, links are used to load an iframe using another iframe links. In example 1, the links in the upper Iframe are used to display two different pictures in the bottom iframe. In example 2, using the links in the upper iframe the video content is displayed both in the bottom iframe as well in the upper iframe.

Example 1: Using two text links in Upper Iframe display and change the picture content in the Bottom Iframe

Folder and Pages Design Steps −

Step 1 − Make two files iFrameFile1.html and iFrameFile2.html.

Step 2 − Write the html code in iFrameFile1.html and make the two iFrames in this file with the names iframeUpper and iframeBottom.

Step 3 − Keep the iframeBottom empty and load the iFrameFile2.html file from inside the iframeUpper.

Step 4 − Write the html code in iFrameFile2.html and make the two <a> tags in this file

Step 5 − Use href with the relative or absolute path with filename of the picture files and use the target="iframeBottom” in <a> tags

Step 6 − Open iFrameFile1.html in a browser. The links will show up in the Upper Iframe. Click the links one by one to see the content of the picturefiles change in the bottom Iframe

The following files are used in this example

File 1 − iFrameFile1.html

File 2 − iFrameFile2.html

File 3 − birdalone.jpg

File 4 − bird.jpg

Code For iFrameFile1.html

<!DOCTYPE html>
<html>
   <body>
      <center>
         <iframe src=".\iframeFile2.html" 
            name="iframeUpper" 
            width="70%" 
            height="300">
         </iframe>
         <br /><br />
         <iframe src="" 
            name="iframeBottom" 
            width="25%" height="250">
         </iframe>
      </center>
   </body>
</html>

Code For iFrameFile2.html

<!DOCTYPE html>
<html>
   <body>
      <center>
         <h1 style="color: purple">Showing Beautiful Birds</h1>
         <h2 style="color: cyan">You will love this...</h2>
         <h3 style="color: orange">Just click the links</h2>
         <p>
            <a href=
            "./birdalone.jpg" 
            target="iframeBottom" width="25%" height="250" frameborder="1" allowfullscreen="allowfullscreen">The Cuteee Bird</a>
         </p>
         <p>
            <a href=
            "./bird.jpg" 
             target="iframeBottom" width="25%" height="250" frameborder="1" allowfullscreen="allowfullscreen">The Friends Together</a>
         </p>
      </center>
   </body>
</html>

Viewing The Result - Example 1

For seeing the result open the iFrameFile1.html in a browser. Now click the links and check the result.

Example 2: Using a text link in Upper Iframe display the video content in the Bottom Iframe as well as in the Upper Iframe

Folder and Pages Design Steps −

Step 1 − Make two files iFrameFile11.html and iFrameFile22.html.

Step 2 − Write the html code in iFrameFile11.html and make the two iFrames in this file with the names iframeUpper and iframeBottom.

Step 3 − Keep the iframeBottom empty and load the iFrameFile22.html file from inside the iframeUpper.

Step 4 − Write the html code in iFrameFile22.html and make the two <a> tags in this file

Step 5 − Use href with the relative or absolute path with filename of the video file in bothe the <a> tags and use the target="iframeBottom” in one <a> tag and use target=_self in the other <a> tag

Step 6 − Open iFrameFile11.html in a browser. The links will show up in the Upper Iframe. Click the links one by one to see the content of the video file. First the content will show up in the bottom Iframe and then in the same Upper Iframe.

The following files are used in this example

File 1 − iFrameFile11.html

File 2 − iFrameFile22.html

File 3 − birdvideo.mp4

Code For iFrameFile11.html:

<!DOCTYPE html>
<html>
   <body>
      <center>
         <iframe src=".\iframeFile22.html" 
            name="iframeUpper" 
            width="70%" 
            height="300">
         </iframe>
         <br /><br />
         <iframe src="" 
            name="iframeBottom" 
            width="25%" height="250">
         </iframe>
      </center>
   </body>
</html>

Code For iFrameFile22.html

<!DOCTYPE html>
<html>
   <body>
      <center>
         <h1 style="color: purple">Showing Beautiful Birds Video</h1>
         <h2 style="color: cyan">You will love this...</h2>
         <h3 style="color: orange">Just click the links</h2>
         <p>
            <a href=
            "./birdvideo.mp4" target="iframeBottom">
            First Open the Video in the bottom frame
            </a>
         </p>
         <p>
            <a href=
            "./birdvideo.mp4" target=_self>
            Open The video in the same frame
            </a>
         </p>
   </center>
   </body>
</html>

Viewing The Result - Example 2:

For seeing the result open the iFrameFile11.html in a browser. Now click the links and check the result.

In this HTML Iframe and a-href article, using two different examples, the ways to show the content in second Iframe is given by clicking the links from the first Iframe. The second example also shows how to see the content same iframe also. The first example uses the picture files while in the second example a video display example is used.

Updated on: 18-Apr-2023

276 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements