简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  How to load a hyperlink from one iframe into another iframe?

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

WBOY
WBOYforward
2023-09-07 11:41:14716browse

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

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

Example 1: Use two text links in the upper Iframe to display and change the image content in the bottom Iframe

Folder and page design steps -

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

Step 2 - Write the html code in iFrameFile1.html and create two iFrames in this file named iframeUpper and iframeBottom.

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

Step 4 - Write the html code in iFrameFile2.html and create two tags

in this file

Step 5 - Use href and a relative or absolute path to the filename of the image file, and use target="iframeBottom" in the

tag

Step 6 - Open iFrameFile1.html in your browser. The link will appear in the iframe above. Click the links one by one and you can see that the content of the image file in the bottom iframe changes.

The following files are used in this example

File1 − iFrameFile1.html

File 2 - iFrameFile2.html

File 3 − birdalone.jpg

File 4 − bird.jpg

The Chinese translation of

Code For iFrameFile1.html

is:

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>

iFrameFile2.html Code

<!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>

View results - Example 1

To see the results, open iFrameFile1.html in your browser. Now click on the link and check the results.

Example 2: Using text links in the upper Iframe to display video content in the lower Iframe and upper Iframe

Folder and page design steps -

Step 1 - Create two files iFrameFile11.html and iFrameFile22.html.

Step 2 - Write the html code in iFrameFile11.html and create two iFrames named iframeUpper and iframeBottom in the file.

Step 3 - Keep iframeBottom empty and load the iFrameFile22.html file from within iframeUpper.

Step 4 - Write the html code in iFrameFile22.html and create two tags

in this file

Step 5 - Use href along with relative or absolute path and file name of the video file in tags and use target="iframeBottom" in one tag and use another target=_self in a

tag

Step 6 - Open iFrameFile11.html in your browser. The link will appear in the iFrame above. Click the links to view the contents of the video file. First the content will be displayed in the bottom iFrame and then in the same upper iFrame.

The following files are used in this example

File1 − iFrameFile11.html

File 2 - iFrameFile22.html

File 3 - Birdvideo.mp4

iFrameFile11.html Code: 

<!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>
The Chinese translation of

Code For iFrameFile22.html

is:

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>

View results - Example 2:

To see the results, open iFrameFile11.html in your browser. Now click on the link and check the results.

In this HTML Iframe and a-href article, using two different examples, the method of displaying the content in the second Iframe by clicking a link in the first Iframe is given. The second example also shows how to view content within the same Iframe. The first example uses an image file, while the second example uses a video display example.

The above is the detailed content of How to load a hyperlink from one iframe into another iframe?. For more information, please follow other related articles on the PHP Chinese website!

html if for href
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to include an option in a dropdown list in HTML?Next article：How to include an option in a dropdown list in HTML?

Related articles

See more