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 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.
392 Views
