如何将一个iframe中的超链接加载到另一个iframe中？

百变鹏仔 3个月前 (09-21) #HTML

文章标签如何将

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

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

文件夹和页面设计步骤 -

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

步骤 2 - 在 iFrameFile1.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

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

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

查看结果 - 示例1

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

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

文件夹和页面设计步骤 -

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

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

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

步骤 4 - 在 iFrameFile22.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 代码：

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

的中文翻译为：

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>

查看结果 - 示例 2：

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

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

文章推荐

如何将一个iframe中的超链接加载到另一个iframe中？

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

本例中使用了以下文件

Code For iFrameFile1.html

代码 For iFrameFile1.html

iFrameFile2.html 代码

查看结果 - 示例1

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

iFrameFile11.html 代码：

Code For iFrameFile22.html

Code For iFrameFile22.html

查看结果 - 示例 2：

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8