有时候，任务是在一个容器中点击一个链接，然后在另一个容器中显示内容。在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代码，并在此文件中创建两个3499910bf9dac5ae3c52d5ede7383485标签
步骤 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中？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何将一个iframe中的超链接加载到另一个iframe中？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
