有时候，任务是在一个容器中点击一个链接，然后在另一个容器中显示内容。在HTML中，使用iframes可以轻松地在页面上指定的区域显示内容。在本文中，使用两个不同的示例，链接被用来通过另一个iframe链接加载一个iframe。在示例1中，上方iframe中的链接用于在下方iframe中显示两张不同的图片。在示例2中，使用上方iframe中的链接，视频内容同时显示在下方iframe和上方iframe中。

示例1：在上部Iframe中使用两个文本链接来显示和更改底部Iframe中的图片内容

文件夹和页面设计步骤 -

笔尖Ai写作

AI智能写作，1000+写作模板，轻松原创，拒绝写作焦虑！一款在线Ai写作生成器

下载

步骤 1 − 创建两个文件 iFrameFile1.html 和 iFrameFile2.html。

步骤 2 - 在 iF​​rameFile1.html 中编写 html 代码，并在此文件中创建两个 iFrame，名称为 iframeUpper 和 iframeBottom。

第三步 - 将iframeBottom保持为空，并从iframeUpper内部加载iFrameFile2.html文件。

第四步 - 在iFrameFile2.html中编写html代码，并在此文件中创建两个标签

步骤 5 - 使用 href 和图片文件的文件名的相对或绝对路径，并在 标签中使用 target="iframeBottom"

步骤 6 - 在浏览器中打开 iFrameFile1.html。链接将显示在上方的 iframe 中。逐个点击链接，可以看到底部 iframe 中的图片文件内容发生变化。

本例中使用了以下文件

文件1 − iFrameFile1.html

文件 2 - iFrameFile2.html

文件 3 − birdalone.jpg

文件4 − bird.jpg

Code For iFrameFile1.html

代码 For iFrameFile1.html

iFrameFile2.html 代码

   
      
         
Showing Beautiful Birds
         
You will love this...
         
Just click the links
         

            The Cuteee Bird
         
         

            The Friends Together
         
      
   
 

查看结果 - 示例1

要查看结果，请在浏览器中打开 iFrameFile1.html。现在点击链接并检查结果。

示例 2：在上层 Iframe 中使用文本链接在下层 Iframe 和上层 Iframe 中显示视频内容

文件夹和页面设计步骤 -

第一步 - 创建两个文件 iFrameFile11.html 和 iFrameFile22.html。

第二步 - 在iFrameFile11.html中编写html代码，并在该文件中创建两个名为iframeUpper和iframeBottom的iFrame。

第三步 - 保持iframeBottom为空，并从iframeUpper内加载iFrameFile22.html文件。

步骤 4 - 在 iF​​rameFile22.html 中编写 html 代码，并在此文件中创建两个 标记

第 5 步 - 在 标记中使用 href 以及相对或绝对路径以及视频文件的文件名，并在一个 标记中使用 target="iframeBottom" 并使用另一个 标记中的 target=_self

第6步 - 在浏览器中打开iFrameFile11.html。链接将显示在上方的iFrame中。依次点击链接以查看视频文件的内容。首先，内容将显示在底部的iFrame中，然后在同一上方的iFrame中显示。

本例中使用了以下文件

文件1 − iFrameFile11.html

文件 2 - iFrameFile22.html

文件 3 - Birdvideo.mp4

iFrameFile11.html 代码：

Code For iFrameFile22.html

Code For iFrameFile22.html

   
      
         
Showing Beautiful Birds Video
         
You will love this...
         
Just click the links
         

            
            First Open the Video in the bottom frame
            
         
         

            
            Open The video in the same frame
            
         
   
   
 

查看结果 - 示例 2：

要查看结果，请在浏览器中打开 iFrameFile11.html。现在点击链接并检查结果。

在这个HTML的Iframe和a-href文章中，使用两个不同的示例，通过点击第一个Iframe中的链接来展示第二个Iframe中的内容的方法被给出。第二个示例还展示了如何在同一个Iframe中查看内容。第一个示例使用图片文件，而第二个示例使用了一个视频显示示例。