如何将一个iframe中的超链接加载到另一个iframe中？-html教程-PHP中文网

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

有时候，任务是在一个容器中点击一个链接，然后在另一个容器中显示内容。在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

登录后复制

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- 在 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 代码：

登录后复制

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

登录后复制