数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何从一个 iframe 加载超链接到另一个 iframe？
有时，任务是在一个容器中点击链接，并在另一个容器中显示内容。在 HTML 中，iframe 用于轻松地在页面上的指定区域显示内容。在本文中，使用两个不同的示例，链接用于使用另一个 iframe 链接加载 iframe。在示例 1 中，上部 iframe 中的链接用于在下部 iframe 中显示两张不同的图片。在示例 2 中，使用上部 iframe 中的链接，视频内容在下部 iframe 和上部 iframe 中同时显示。
示例 1：在上部 iframe 中使用两个文本链接显示和更改下部 iframe 中的图片内容
文件夹和页面设计步骤 −
步骤 1 − 创建两个文件 iFrameFile1.html 和 iFrameFile2.html。
步骤 2 − 在 iFrameFile1.html 中编写 html 代码，并在该文件中创建两个名为 iframeUpper 和 iframeBottom 的 iframe。
步骤 3 − 保持 iframeBottom 为空，并从 iframeUpper 内部加载 iFrameFile2.html 文件。
步骤 4 − 在 iFrameFile2.html 中编写 html 代码，并在该文件中创建两个 <a> 标签。
步骤 5 − 使用 href 附带图片文件的相对或绝对路径和文件名，并在 <a> 标签中使用 target="iframeBottom”。
步骤 6 − 在浏览器中打开 iFrameFile1.html。链接将显示在上部 iframe 中。依次点击链接，查看下部 iframe 中的图片文件内容的变化。
此示例中使用了以下文件
文件 1 − iFrameFile1.html
文件 2 − iFrameFile2.html
文件 3 − birdalone.jpg
文件 4 − bird.jpg
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 中显示视频内容
文件夹和页面设计步骤 −
步骤 1 − 创建两个文件 iFrameFile11.html 和 iFrameFile22.html。
步骤 2 − 在 iFrameFile11.html 中编写 html 代码，并在该文件中创建两个名为 iframeUpper 和 iframeBottom 的 iframe。
步骤 3 − 保持 iframeBottom 为空，并从 iframeUpper 内部加载 iFrameFile22.html 文件。
步骤 4 − 在 iFrameFile22.html 中编写 html 代码，并在该文件中创建两个 <a> 标签。
步骤 5 − 在两个 <a> 标签中使用 href 附带视频文件的相对或绝对路径和文件名，并在其中一个 <a> 标签中使用 target="iframeBottom"，在另一个 <a> 标签中使用 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>
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 中查看内容。第一个示例使用图片文件，而第二个示例使用视频显示示例。
527 次浏览
